Bootstrap 将复选框放在下拉列表中

Posted 2023-02-22

【中文标题】Bootstrap 将复选框放在下拉列表中

【英文标题】：Bootstrap putting checkbox in a dropdown

【发布时间】：2014-09-20 21:58:53

【问题描述】：

我正在尝试将复选框表单放在这样的下拉列表中：

<ul>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Dropdown Form<b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
    </ul>
  </li>
</ul>

这是Demo in Bootply

但是，正如您在演示中看到的那样，无论出于何种原因，实际的复选框本身都会出现在下拉菜单之外。谁能告诉我是什么原因造成的，以及应该如何实施？如果我把标签类拿出来，它会起作用，但它会全部堆积起来。

【参考方案1】：

我认为一个简单的解决方案是，

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" 
id="sampleDropdownMenu" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">
 <input type="checkbox">Action
 </button>
<button class="dropdown-item" type="button">
 <input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
  <input type="checkbox">Action
</button>
</div>
</div>

【参考方案2】：

这是我们将要构建的内容：

html

本质上，我们希望将两组不同的 Bootstrap 控件和样式结合起来：Dropdowns 和 Checkboxes。在每个li 内部，我们将使用label 代替a 元素，以便我们可以wrap the checkbox in a label 并使整行可点击。

<ul class="dropdown-menu checkbox-menu allow-focus">
  <li >
    <label>
      <input type="checkbox"> Cheese
    </label>
  </li>
</ul>

CSS

我们可以窃取一些通常应用于.dropdown-menu li a 的样式，输入并将它们应用于我们的标签选项。我们将使标签占据容器的整个宽度并修复一些标签/复选框对齐问题。此外，我们将为.active 和:hover 添加样式。

.checkbox-menu li label 
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;

.checkbox-menu li input 
    margin: 0px 5px;
    top: 2px;
    position: relative;


.checkbox-menu li.active label 
    background-color: #cbcbff;
    font-weight:bold;


.checkbox-menu li label:hover,
.checkbox-menu li label:focus 
    background-color: #f5f5f5;


.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus 
    background-color: #b8b8ff;

javascript

其他一些管理工作，我们将在每个列表项上手动保留一个 .active 类标志，以对应于该项目是否被选中，以便我们可以适当地设置它的样式。

$(".checkbox-menu").on("change", "input[type='checkbox']", function() 
   $(this).closest("li").toggleClass("active", this.checked);
);

我们还希望通过阻止事件冒泡来允许菜单stay open on internal click events 来允许多项选择

$(document).on('click', '.allow-focus', function (e) 
  e.stopPropagation();
);

堆栈片段中的演示

$(".checkbox-menu").on("change", "input[type='checkbox']", function() 
   $(this).closest("li").toggleClass("active", this.checked);
);

$(document).on('click', '.allow-focus', function (e) 
  e.stopPropagation();
);

body 
  padding: 15px;


.checkbox-menu li label 
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;

.checkbox-menu li input 
    margin: 0px 5px;
    top: 2px;
    position: relative;


.checkbox-menu li.active label 
    background-color: #cbcbff;
    font-weight:bold;


.checkbox-menu li label:hover,
.checkbox-menu li label:focus 
    background-color: #f5f5f5;


.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus 
    background-color: #b8b8ff;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>



<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" 
          id="dropdownMenu1" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true">
    <i class="glyphicon glyphicon-cog"></i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
  
    <li >
      <label>
        <input type="checkbox"> Cheese
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Pepperoni
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Peppers
      </label>
    </li>
    
  </ul>
</div>

【讨论】：

这是一个非常好的解决方案，感谢分享。

【参考方案3】：

Bootstrap 在其文档中使用复选框的方式如下：

<div class="checkbox">
    <label>
        <input type="checkbox">Two
    </label>
</div>

所以你的看起来像：

<ul>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Form<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Two
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Two
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

文档： http://getbootstrap.com/css/#forms

【参考方案4】：

这里的问题是您的复选框的样式（通过 Bootstrap）：

.checkbox input[type=checkbox]
    position: absolute;
    margin-left: -20px;

这样做可能是为了避免您在删除<label> 上的.checkbox 类时看到的那些“捆绑”问题，但在这种情况下，否定的margin-left 会导致问题。

通过对标记和 CSS 进行最小调整来解决此问题的一种方法是在 <label> 上添加一些填充以解决此问题：

label.checkbox
    padding-left:20px;

这里有一个updated Bootply 向您展示实际代码。希望这可以帮助！如果您有任何问题，请告诉我。