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

Question

上图中，MenuItems被对齐到了MyMenu的右侧，我想让它们左对齐（也就是说要和MyMenu的左边缘对齐）。我尝试使用pull-left和pull-right类来编写代码，例如<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>

- Selaru Sinbath

Answer 1

适用于 Twitter Bootstrap 3

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

希望对你有所帮助 :)

- Abhishek Goel

---

在v3.3.1版本上出现了故障，无法正常工作。 - undefined

Answer 2

对于 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是最棒的

- Shivek Parmar

---

这是最好的解决方案100％。感谢分享！ - Harvey Dobson

Answer 3

添加以下样式元素到下拉菜单的<ul>中将使下拉菜单与菜单项左侧对齐：

ul { left: 0; }

left:0;

请查看Bootply，该示例针对.dropdown-menu.pull-left添加了left:0;样式来解决您的问题。

---

更新

我注意到Bootstrap自3.1.0版本起已经弃用了pull-right和pull-left。现在可以使用dropdown-menu-left类来使用内置的Bootstrap CSS将下拉菜单左对齐，因此您无需额外的CSS代码。请参见此更新后的Bootply。

- B_s

---

@Hanoncs 是的，这个回复是去年的，所以链接可能会失效...此外，整个 bootply 网站对我来说都无法正常加载，所以可能他们只是遇到了一些问题... - B_s

仅仅7个月前。是的，希望他们的链接不会像Twitter一样消失。这本质上应该是一个维基百科。 - M H

@Hanoncs 如果我们回答并链接到外部页面，比如使用Bootply来说明解决方案，我们无法保证这些链接会一直有效。Stackoverflow的目标不是成为一个维基百科，我们试图帮助彼此解决编程问题和疑问。就主题而言，我遇到了一个应用程序错误，所以我认为Bootply链接很快就会再次工作。 - B_s

如果对于每个人来说不是很明显，那么需要添加两个类：<ul class="dropdown-menu dropdown-menu-left">。 - Daniel

@MondKin <ul class="dropdown-menu dropdown-menu-left"> 在Bootstrap 4中无法正常工作。 - Pathros

Answer 4

由于以上给出的答案太旧了，我想提供适用于Bootstrap 3.3.7的有效解决方案。

将以下CSS应用于您的.dropdown-menu div：

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

说明：

• 使用"right:0;"将菜单的结束与下拉按钮的结束对齐。
• 使用"left:auto;"覆盖 Bootstrap 中 dropdown-menu 类中给出的 left:0。
• 使用填充来修复菜单项上的悬停，可以忽略。

- Suyash Gulati

---

@Aaron，你在Bootstrap 5中寻找特定的问题吗？如果有问题可以问，我很乐意帮助！ - Suyash Gulati

Answer 5

将 navbar-right 改为 navbar-left 并在 UL 上添加 pull-right 类。

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

请查看JSfiddle示例。

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

- Ryan Janvier

Answer 6

对于Bootstrap 4：

有以下CSS类名：.dropup、.dropright和.dropleft。

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Source: Bootstrap

- Marcello

Answer 7

对于一个被浮动到屏幕右侧的下拉项，其下拉内容会流出屏幕。只需添加以下代码即可防止下拉内容流出屏幕。

right: 0;

- markokoen