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

Posted 2023-03-06

【中文标题】如何左对齐 bootstrap 3 下拉菜单？

【英文标题】：How to left align bootstrap 3 dropdown menu?

【发布时间】：2015-01-28 02:50:12

【问题描述】：

在上图中，MenuItems 与 MyMenu 的右侧对齐，我需要将 MyMenu 的 MenuItems 左对齐（我的意思是它必须与 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>

【参考方案1】：

对于 Twitter Bootstrap 3

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

希望对你有帮助:)

【参考方案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>

引导是最好的

【讨论】：

这是 100% 的最佳解决方案。感谢分享！

【参考方案3】：

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

left:0;

查看此Bootply，它以.dropdown-menu.pull-left 为目标并添加了left:0;。 这应该可以解决您的问题。

---

更新

我看到自 Bootstrap 3.1.0 起，Bootstrap 具有deprecated pull-right 和 pull-left。使用 dropdown-menu-left 类使用内置的 Bootstrap css 来对齐左边缘的下拉菜单，这样您就不需要额外的 CSS。看到这个更新Bootply

【讨论】：

@Hanoncs 是的，这个回复来自去年，所以链接可能会被破坏......此外，整个 bootply 网站对我来说没有正确加载，所以也许他们只是遇到了一些问题。 ..

仅在大约 7 个月前。是的，希望他们的链接字体像推特一样消失。这基本上应该是一个维基。

@Hanoncs 如果我们回答并链接到外部页面，例如 Bootply 来说明解决方案，我们不能保证这些链接继续工作。 *** 的目标不是成为一个 wiki，我们尝试在编程问题和问题上互相帮助。关于主题，我收到一个应用程序错误，所以我认为 Bootply 链接很快就会再次起作用。

如果不是每个人都清楚，这两个类都需要添加：<ul class="dropdown-menu dropdown-menu-left">。

@MondKin <ul class="dropdown-menu dropdown-menu-left"> 它不适用于 Bootstrap 4

【参考方案4】：

由于上面给出的答案太老了，想为 Bootstrap 3.3.7 提供可行的解决方案。

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

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

说明：

“正确：0；”使菜单的结尾与下拉列表的结尾内联 按钮。 “左：自动；”覆盖在下拉菜单中给出的 left:0 通过引导类。 填充用于纠正悬停在菜单项上，

可以忽略

。

【讨论】：

@Aaron 您在引导程序 5 中寻找答案的任何特定问题。您可以询问。乐于助人！

【参考方案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/

【参考方案6】：

对于 Bootstrap 4：

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

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

来源：Bootstrap

【参考方案7】：

对于已经浮动到屏幕右侧的下拉项，其下拉内容流过屏幕，只需添加以下代码即可防止下拉内容流过屏幕。

right: 0;