Bootstrap下拉列表未按预期工作

Question

我想这样做

所以我尝试了这个way

<div class="container">
<div class="row">
<div class="btn-group" data-toggle="buttons">
<div class="col-md-2 ">
<button class="icon-box-add dropdown-toggle" data-toggle="dropdown">  Stock
 <span class="caret"></span>
  </button>        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>


</div>
<div class="col-md-2">Orders</div>
<div class="col-md-2">Content</div>
<div class="col-md-2">Setting</div>
<div class="col-md-2">Marketting</div>
<div class="col-md-2">Customers</div>

</div>
</div>
</div>

但输出不符合我的要求（根据所示图像）。请告诉我怎么做

注意请忽略图标，我无法在bootply中附加图片。

Answer 1

我希望它可以帮到你：

bootply： http://bootply.com/112644

HTML：

<div class="container">
<div class="row">
<div class="btn-group col-md-2" data-toggle="buttons">
  <a class="icon-box-add dropdown-toggle" data-toggle="dropdown">  Stock
   <span class="caret"></span>
    </a>        
    <ul class="dropdown-menu pull-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
    </ul>


  </div>
<div class="col-md-2">Orders</div>
<div class="col-md-2">Content</div>
<div class="col-md-2">Setting</div>
<div class="col-md-2">Marketting</div>
<div class="col-md-2">Customers</div>

</div>
</div>

<强>更新

http://bootply.com/112648 将col-md-2更改为pull-left

http://bootply.com/112649 添加保证金权利

更新2： 评论：在图像中，div是并排的

在添加背景（作为图像）时，您可以看到它们是并排的...... http://bootply.com/112650