Css 如何左对齐引导3下拉菜单？

在上面的图像中，MenuItems与MyMenu的右侧对齐，我需要将MyMenu的MenuItems左对齐（我的意思是它必须与MyMenu的左边缘对齐），我尝试使用“向左拉”和“向右拉”类，如我的代码，但它不起作用。有人知道怎么做吗

这是我的密码

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

切换导航

将此样式元素添加到下拉列表将使下拉列表与菜单项的左侧对齐：

left:0;

查看此选项，它指向

。下拉菜单。向左拉
，并添加
左：0。
这应该能解决你的问题


更新

从Bootstrap 3.1.0开始，我看到Bootstrap有向右拉和向左拉。使用
下拉菜单left
类使用内置引导css对齐左侧边缘的下拉列表，这样就不需要额外的css。请参阅此更新的
将导航栏右侧更改为导航栏左侧，并向UL添加一个右拉类

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



查看JSFIDLE以获得一个示例

适用于Twitter引导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是最好的
因为上面给出的答案太旧了，我想为Bootstrap 3.3.7提供一个有效的解决方案


在.下拉菜单div上使用给定的css：

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

解释：


“右：0；”使菜单的结尾与下拉列表的结尾内联
按钮
“left:auto；”覆盖下拉菜单中给出的left:0
通过引导初始化
填充用于纠正菜单项上的悬停，可以忽略
对于引导程序4：

CSS类的名称为：
.dropup
、
.dropright
和
.dropleft


液滴

来源：
对于浮动到屏幕右侧的下拉项，其下拉内容在屏幕上流动，只需添加以下代码，以防止下拉内容在屏幕上流动

right: 0;

@汉诺克斯：是的，这是去年的回复，所以有可能链接被破坏了。。。此外，整个bootply站点没有为我正确加载，所以可能他们只是有一些问题…大约7个月前。是的，希望他们的链接像twitter一样消失。这基本上应该是一个wiki。@Hanoncs如果我们回答并链接到外部页面，比如Bootply来说明解决方案，我们不能保证这些链接保持工作。Stackoverflow的目标不是成为一个wiki，我们试图在编程问题上互相帮助。在这个主题上，我遇到了一个应用程序错误，所以我认为引导链接很快就会再次工作。如果不是每个人都能看到，那么这两个类都需要添加：
@MondKin
它不适用于引导4引导5有任何更新吗@Suyash@Aaron您在bootstrap 5中寻找答案的任何特定问题。你可以问。很乐意帮忙！
right: 0;