使下拉菜单在bootstrap 3中右对齐

Question

​

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="group-menu-body">
  <div class="dropdown">
    <ul class="">
      <li class="">
        <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Logistics
        <span class="caret"></span>
      </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="right: 0; left: auto;">
          <li><a href="#">Grant Office Supplies/Gift</a></li>
          <li><a href="#">Print Name Card</a></li>
          <li><a href="#">Photo/Notarization</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

​

我有下面的下拉菜单列表，但是，下拉内容显示为图片中的内容。因此，我想让它向右对齐。有没有办法对齐它？

示例：

​

​

谢谢。

Answer 1

试试这个：

​

.dropdown-menu {
    float:left;
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li class="dropdown-submenu dropdown-menu-right"> <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

​

演示链接： http://jsfiddle.net/szx4Y/2392/

Answer 2

您只需要向dropdown-menu元素添加dropdown-menu-right类。试试这段代码。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group-menu-body">
    <div class="dropdown">
    <ul class="">
      <li class="">
        <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Logistics
        <span class="caret"></span>
      </a>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1" style="right: 0; left: auto;">
             <li><a href="#">Grant Office Supplies/Gift</a></li>
            <li><a href="#">Print Name Card</a></li>
            <li><a href="#">Photo/Notarization</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
      </li>    
    </ul>
  </div>
  </div>
</div>