如何左对齐bootstrap 3下拉菜单？

Question

在上图中的MenuItems被对齐到MyMenu菜单的右侧,我需要左对齐的MyMenu的的MenuItems(我的意思是它必须对齐MyMenu菜单的左边),我尝试用拉左,右拉班一样<ul class="dropdown-menu pull-left" role="menu">用我的代码,但它不起作用.有谁知道怎么做？

这是我的代码

<!-- Static navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

              <ul class="nav navbar-nav navbar-right text-uppercase">
                <li><a id="Home" href="index.html">Home</a></li>
                <!-- Visa drapdown-->
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>

                  <ul class="dropdown-menu pull-left" role="menu">
                    <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 02</a></li>
                      <li><a href="#">Menu Item 03</a></li>
                      <li><a href="#">Menu Item 04</a></li>
                      <li><a href="#"></a></li>

                    </ul>

                  </li>

            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>

Answer 1

对于Twitter Bootstrap 3

<div class="dropdown-menu pull-right">
    <!-- write your code here -->
</div>

希望能帮助到你 :)

Answer 2

将此样式元素添加到下拉列表<ul>会将下拉列表对齐到菜单项的左侧:

left:0;

请参阅此Bootply,其中包含.dropdown-menu.pull-left并添加了一个left:0;.这应该可以解决您的问题.

更新

我看到Bootstrap已经弃用了Bootstrap 3.1.0中的pull-right和pull-left.使用dropdown-menu-left类使用内置的Bootstrap css来对齐左边缘的下拉列表,这样就不需要额外的CSS了.看到这个更新的Bootply

Answer 3

对于Bootstrap 3.1.0或更高版本,使用.dropdown-menu-left或.dropdown-menu-right显示父菜单右侧或左侧的下拉菜单.在您的情况下尝试以下.

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
      <ul class="dropdown-menu dropdown-menu-left" role="menu">
       <!-- write your code here -->
      </ul>
 </li>

Bootstrap是最好的

Answer 4

由于以上给出的答案太旧了，因此想为Bootstrap 3.3.7提供可行的解决方案。

在.dropdown-menu div上使用给定的CSS：

.dropdown-left-manual {
  right: 0;
  left: auto;
  padding-left: 1px;
  padding-right: 1px;
}

说明：

• “正确的0：” 使菜单的结尾与下拉按钮的结尾内联。
• “左：自动；” 覆盖bootstrap在dropdown-menu类中给定的left：0。
• 填充用于纠正菜单项上的悬停，可以忽略。

Answer 5

将navbar-right更改为navbar-left并向UL添加一个右拉类.

<ul class="nav navbar-nav navbar-left text-uppercase pull-right">

查看JSfiddle的示例.

http://jsfiddle.net/eqcpLj6k/1/