Bootstrap将复选框放在下拉列表中 [英] Bootstrap putting checkbox in a dropdown

问题描述

我正试图在这样的下拉菜单中放置一个复选框形式:

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>

这是一个 Bootply中的演示

但是，如您在演示中所见，无论出于何种原因，实际的复选框本身都会出现在下拉菜单之外.谁能告诉我是什么原因造成的，以及应该如何实现?如果我删除标签类，则可以使用，但全部都聚集了.

Here is a Demo in 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.

推荐答案

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

The way Bootstrap uses checkboxes in their docs is as following:

<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

这篇关于Bootstrap将复选框放在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！