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