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

Answer 2

你需要两个不同的div，如：

＆＃13;

<ul class="list-inline">
  <li>
    <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>    
    </div>
  </li>

  <li>
    <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>    
    </div>
  </li>
</ul>

＆＃13;

Answer 3

在buttons

中添加了<div class="dropdown pull-left">

<div class="btn-group btn-block">
 <div class="dropdown pull-left">   //added this
    <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>    //added this
 <div class="dropdown pull-left"> //added this
    <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>          //added this
</div>

Demo Link Here

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

3 个答案: