在Bootstrap按钮下拉项中添加复选标记

Question

我正在使用Twitter Bootstrap下拉按钮：

http://getbootstrap.com/components/#btn-dropdowns-single

我想在用户选择的那些列表项中添加选中标记（不一定是复选框）。是否已经建立了内置样式，或者有人已经为此建立了解决方案？

谢谢！

Answer 1

这是一种不需要图标字体或图像的解决方案。这就是您需要的所有CSS：

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  content: '?';
  font-weight: 600;
}

切换检查状态

要添加/删除复选标记，只需dropdown-item-checked在适当的位置切换修饰符dropdown-item：

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Item 1</a>
    <a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
    <a href="#" class="dropdown-item">Item 3</a>
  </div>
</div>

看起来是这样的：

演示与来源

演示：https : //codepen.io/claviska/pen/aLxQgv

资料来源：https : //www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus

Answer 2

我不知道引导程序中为此内置了任何内容。

Firefox 和 Webkit 浏览器支持元素background-image上的属性option：

 <option style="background-image:url(check.gif);">Option</option>

否则，您将需要求助于 jQuery 解决方案。这是一个很好的：

http://www.marghoobuleman.com/jquery-image-dropdown