Bootstrap3在同一行上有两个下拉列表

Question

我正在尝试使两个bootstrap3下拉元素在同一行上工作:

我试过这个:

 <div class="btn-group btn-block">
    <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 1</a></li>
        <li><a href="#">Reason 2</a></li>
        <li><a href="#">Reason 3</a></li>
    </ul>


    <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 5</a></li>
        <li><a href="#">Reason 6</a></li>
        <li><a href="#">Reason 7</a></li>
    </ul>   
</div>

不幸的是,这两个下拉列表似乎共享相同的ul列表(只有第二个).如何将第一个下拉ul列表绑定到其列表中,将第二个下拉列表绑定到自己的ul列表中？

Answer 1

你需要把你dropdowns的两个分开btn-group:

<div class="btn-group btn-group-inline">
  <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu btn-block">
    <li><a href="#">Reason 1</a></li>
    <li><a href="#">Reason 2</a></li>
    <li><a href="#">Reason 3</a></li>
  </ul>
</div>

<div class="btn-group btn-group-inline">
  <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu btn-block">
    <li><a href="#">Reason 5</a></li>
    <li><a href="#">Reason 6</a></li>
    <li><a href="#">Reason 7</a></li>
  </ul>
</div>

的jsfiddle链接