Html Bootstrap 将复选框放在下拉列表中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25016848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap putting checkbox in a dropdown
提问by J.Zil
I'm trying to put a checkbox form in a dropdown like this:
我正在尝试将复选框表单放在这样的下拉列表中：
<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>
Here is a Demo in Bootply
这是Bootply 中的演示
However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.
但是，正如您在演示中所见，无论出于何种原因，实际的复选框本身都出现在下拉菜单之外。谁能告诉我是什么原因造成的，以及应该如何实施？如果我去掉标签类，它会起作用，但它全部都被打包了。
采纳答案by Jimmy Knoot
The way Bootstrap uses checkboxes in their docs is as following:
Bootstrap 在其文档中使用复选框的方式如下：
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
So yours would look like:
所以你的看起来像：
<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>
The docs: http://getbootstrap.com/css/#forms
回答by KyleMit
Here's what we'll build:
这是我们将要构建的内容：
HTML
HTML
Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns& Checkboxes. Inside of each li, we'll use a labelinstead of an aelement, so that we can wrap the checkbox in a labeland make the entire row clickable.
本质上，我们将结合两组不同的 Bootstrap 控件和样式：Dropdowns和Checkboxes。在 each 内部li，我们将使用 alabel而不是a元素，以便我们可以将复选框包装在标签中并使整行可点击。
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
CSS
CSS
We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .activeand :hover.
我们可以窃取一些通常应用于.dropdown-menu li a、 input 并将它们应用于我们的标签选项的样式。我们将使标签占据容器的整个宽度并修复一些标签/复选框对齐问题。此外，我们将添加样式.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
JavaScript
Some other housekeeping, we'll manually keep an .activeclass flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.
其他一些内务，我们将.active在每个列表项上手动保留一个类标志，以对应于该项目是否被选中，以便我们可以适当地设置它的样式。
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
We'll also want to allow multiple selections by allowing the menu to stay open on internal click eventsby stopping the event from bubbling up
我们还希望通过阻止事件冒泡来允许菜单在内部点击事件上保持打开状态来允许多个选择
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
Demo in Stack Snippets
堆栈片段中的演示
$(".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>回答by Serlite
The problem here is that your checkboxes are being styled (by Bootstrap) with:
这里的问题是您的复选框被样式化（通过 Bootstrap）：
.checkbox input[type=checkbox]{
position: absolute;
margin-left: -20px;
}
This is probably done to avoid those "bunching" issues you see when you remove the .checkboxclass on the <label>, but that negative margin-leftis causing problems in this case.
这样做可能是为了避免在删除 上的.checkbox类时看到的那些“成堆”问题<label>，但margin-left在这种情况下，这种负面影响会导致问题。
One way to address this with minimal adjustment to your markup and CSS would just be to add some padding on the <label>to account for it:
通过对标记和 CSS 进行最小调整来解决这个问题的一种方法是在 上添加一些填充<label>来解决这个问题：
label.checkbox{
padding-left:20px;
}
Here's an updated Bootplyto show you the code in action. Hope this helps! Let me know if you have any questions.
这是一个更新的 Bootply，向您展示了正在运行的代码。希望这可以帮助！如果您有任何问题，请告诉我。
