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

切勿覆盖或修改 Bootstrap 基类。始终添加新类或标识。你可以这样做:

1. 将新类“div-inline”添加到类 dropdown..

2. 添加这个CSS

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

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