如何将bootstrap btn-group中的菜单浮动到左侧?

时间:2013-03-06 14:13:55

标签: jquery css twitter-bootstrap

<div class="pull-right">

 <div class="btn-group pull-left">
  <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
    <li><a href="#">some link 1</a></li>
    <li><a href="#">some link 2</a></li>
    <li><a href="#">some link 3</a></li>
   </ul>
  </div>
 </div>

</div>

现在它看起来像这样:

enter image description here

我想有类似的东西:

enter image description here

2 个答案:

答案 0 :(得分:1)

要使下拉列表显示为右对齐,您只需将拉链直接分配到下拉菜单:

Jsfiddle Demo

<ul class="dropdown-menu pull-right">
   <li><a href="#">some link 1</a></li>
</ul>

在你呈现的代码中,分配给按钮组的左拉类不会真正将它拉到左边,因为父div正在使用pull-right类。如果要控制按钮组对齐及其位置。您可以执行以下操作: 多次使用 div class="btn-group"

使用您提供的代码检查jsfiddle(清理一下)Demo with button 将类拉到左侧的类左侧,这样:

 <div class="btn-group left"> <!-- I have assigned a new class to it i.e left -->

比写css到位置:

.btn-group.left{
   bottom: 15px;
   position: relative;
   top: 15px;
   right:20px;
  }

答案 1 :(得分:0)

dropdown-menu班级中的

left: 0更改为right: 0