Javascript Bootstrap3同一行上的两个下拉列表

我试图使两个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

列表

您需要在两个不同的分区中使用它们，例如：

第一







第一

在

//加上这个
第一





//加上这个
//加上这个
第二





//加上这个

---

您需要将您的

下拉列表分为两个
btn组
：

<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>


第一





第二







<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>