Question

我想在Twitter Bootstrap下拉菜单中包含复选框，但我无法将菜单文本（在＆lt; a＆gt; ..＆lt; / a＆gt;中）放在复选框旁边。我已经阅读了用于表单的CSS，并尝试了各种各样的事情无济于事。

这是我认为应该起作用的，但不是。

<li><label class="checkbox" ><input type="checkbox">aaa</label><a href="#" style="float:left"></a></li>

尼维尔

Answer 1

用于解决Oleg回答问题的一行javascript：http://jsfiddle.net/Wsc9r/

Answer 2

将您的复选框包装成A-tag，如下所示：

<li>
    <a>
        <label>
            <input type="checkbox">
            Some text
        </label>
    </a>
</li>

您也可以添加此CSS规则

.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}

Answer 3

试试this way 但是有一些problem

Answer 4

尝试使用此jquery插件进行bootstrap：https://github.com/davidstutz/bootstrap-multiselect

Answer 5

Heare就是一个很好的例子： https://codepen.io/bseth99/pen/fboKH

heare是代码：

＆＃13;

var options = [];



$('.dropdown-menu a').on('click', function(event) {

  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  }

  $(event.target).blur();


  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />



<br/>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li>
            <a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />&nbsp;Option 1</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />&nbsp;Option 2</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />&nbsp;Option 3</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox" />&nbsp;Option 4</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox" />&nbsp;Option 5</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox" />&nbsp;Option 6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 6

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(function()   {
                $('#lstFruits').multiselect({
                    includeSelectAllOption: true
            });
        });
        </script>

</head>
<body>

    <select id="lstFruits" multiple="multiple">
        <option value="1">Choice01</option>
        <option value="2">Choice02</option>
        <option value="3">Choice03</option>
        <option value="4">Choice04</option>
        <option value="5">Choice05</option>
    </select>

</body>
</html>

在Twitter Bootstrap下拉菜单中包含一个复选框

6 个答案: