更改Bootstrap下拉列表的方向

Question

如何更改Twitter Bootstrap dropdown的方向？

我有这样的下拉列表：

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

Answer 1

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

  

弃用.pull-right alignment
  自v3.1.0起，我们已弃用   下拉菜单中的 .pull-right 。要右对齐菜单，请使用   的 .dropdown-menu-right 即可。导航栏中右对齐的导航组件使用a   这个类的mixin版本自动对齐菜单。至   覆盖它，使用 .dropdown-menu-left 。

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

Answer 2

使用pull-right或pull-left类。

Answer 3

这是（使用下拉菜单右侧）：

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

Answer 4

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;更改下拉菜单的位置来进行一些清理，它看起来就像你想要的那样：

Answer 5

引导程序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/

Answer 6

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

Answer 7

在 bootstrap 5 中简单添加 class="dropdown-menu dropdown-menu-end"