更改 Bootstrap 下拉菜单的方向答案

【问题标题】：Changing the direction of a Bootstrap dropdown更改 Bootstrap 下拉菜单的方向
【发布时间】：2013-04-23 10:36:24
【问题描述】：

如何更改Twitter Bootstrap dropdown 的方向？

我有一个这样的下拉菜单：

但我希望它看起来像这样：

【问题讨论】：

你想让实际的“Dropdown v”在右边，但是当你打开它时，打开列表的箭头在左边？
只需再添加一个类.navbar .nav > li > .dropdown-menu.dropdown-menu-fixed:after, .navbar .nav > li > .dropdown-menu.dropdown-menu-fixed:before {left: auto; right: 10px;}。就是这样。

标签： javascript html css twitter-bootstrap

【解决方案1】：

来自http://getbootstrap.com/components/#dropdowns-alignment：

不推荐使用 .pull-right 对齐方式
从 v3.1.0 开始，我们已弃用 .pull-right 在下拉菜单中。要右对齐菜单，请使用 .dropdown-menu-right。导航栏中右对齐的导航组件使用此类的 mixin 版本可自动对齐菜单。到覆盖它，使用 .dropdown-menu-left。

在您的情况下，将 dropdown-menu-right 类添加到具有 dropdown-menu 类的 div 应该可以解决问题。

【讨论】：

【解决方案2】：

使用pull-right 或pull-left 类。

【讨论】：

pull-right 将强制整个下拉列表显示在父级的右侧
@ParvSharma 这正是他想要的
他只是想让顶部的箭头显示在另一边

【解决方案3】：

在这里（使用 dropdown-menu-right）：

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>
<ul>

【讨论】：

【解决方案4】：

引导程序 4

使用“下拉菜单右”和“下拉菜单左”

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          @username
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Account Settings</a>
          <a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logut</a>
        </div>
      </li>

输出：

有关更多信息，请访问文档： https://getbootstrap.com/docs/4.0/components/dropdowns/

【讨论】：

【解决方案5】：

transform: rotateY 或 -webkit-transform:rotateY 可以解决问题，让我们将其应用于下拉菜单；

navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
    -webkit-transform: rotateY(180deg);
}

或者您可以根据您的确切要求将其插入.dropdown-menu 或.open > .dropdown-menu 类中。现在看起来像：

可以看出，所有链接都需要还原，因此使用相同的 CSS 规则很简单：

.dropdown-menu > li > a {
    -webkit-transform: rotateY(180deg);
}

现在看起来像：

需要通过left:10px; 更改下拉菜单的位置来进行一些清理，它看起来就像你想要的那样：

【讨论】：

天哪。很有创意，但库已经通过菜单本身的“pull-xxx”类支持它。
@Joshua 我被告知库有'pull-xxx'，因为我知道有一个名为 Bootstrap 的库。但仔细阅读 op 的请求和我的回答，它提供了翻转矩形的上箭头。
您的解决方案仍然很古怪（但很有创意！）。最好覆盖下拉菜单的CSS，调整箭头本身的位置。转换会显着增加 CPU 负载，并且还可能引入错误。
@Joshua 操作箭头的 CSS 本身会更简单我同意，但我认为我的解决方案并不比声称“pull-xxx”解决 op 的问题更古怪:)

【解决方案6】：

自从创建这篇文章以来，已经有很多更新了，所以我想我会给出一个更新的答案。

对于 Bootstrap 4+，您可以使用 dropleft、dropright 或 dropup 类；在您的 lists/btn-group 父 div 中。

现在，您还可以将按钮用作您的dropdown-items。

查看 Bootstraps 文档 here

【讨论】：

【解决方案7】：

Twitter Bootstrap 中似乎没有选项来处理下拉菜单中的方向。对箭头位置有影响的只有这个类.navbar .nav > li > .dropdown-menu:before尝试摆弄它以查看下拉方向的变化

【讨论】：