Bootstrap与按钮在同一行上下拉列表

Question

这是我的代码:http://jsfiddle.net/52VtD/7462/

我想把我的下拉按钮放在同一条线上.但是我不能这样做因为下拉是一个div并且保持在下面的线上.我怎么能把它们放在同一条线上？

<div class="panel panel-default">
  <div class="panel-heading">
    <input type="checkbox">
    <button type="submit" class="btn btn-xs btn-default">Stage</button>
    <button type="submit" class="btn btn-xs btn-default">Add Label</button>
    <button type="submit" class="btn btn-xs btn-default">Send Message</button>
    <button type="submit" class="btn btn-xs btn-default">Archive</button>

    <div class="dropdown">
      <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Assign to<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
      </ul>
    </div>

 </div>
Test
</div>

Answer 1

永远不要覆盖或修改引导程序基类.始终添加新的类或标识.你可以这样做:

1. 添加新的类"格列直插式"与类的div dropdown..

2. 添加此CSS

   .div-inline{
       display:inline-block;
   }
   

JSFIddle:http://jsfiddle.net/rahulrulez/52VtD/7464/

Answer 2

从bootstrap 4开始,您可以更改下拉线:

<div class="dropdown">

至:

<div class="dropdown d-inline-block">

这将使所有按钮显示在一行中.

Answer 3

将此添加到您的 CSS：

.dropdown{
    display: inline;
}

小提琴