22

如何更改Twitter Bootstrap 下拉菜单的方向？

我有一个这样的下拉列表：

是）我有的

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

我想要的是

4

7 回答 7

28

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

已弃用 .pull-right 对齐
从 v3.1.0 开始，我们已弃用 下拉菜单中的 .pull-right。要右对齐菜单，请使用 .dropdown-menu-right. 导航栏中的右对齐导航组件使用此类的混合版本来自动对齐菜单。要覆盖它，请使用.dropdown-menu-left.

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

于 2014-08-18T13:04:34.120 回答
15

使用pull-right或pull-left类。

于 2013-04-23T10:41:35.057 回答
13

这是（使用dropdown-menu-right）：

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>
<ul>
于 2017-02-15T07:40:47.320 回答
3

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

于 2019-08-11T14:06:02.450 回答
1

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现在看起来像：

下降1

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

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

现在它看起来像：

下降2

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

最后结果

于 2013-04-23T11:52:04.930 回答
0

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

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

现在，您也可以使用按钮作为您的dropdown-items.

在此处查看Bootstraps 文档

于 2022-01-28T17:35:58.907 回答
-1

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

于 2013-04-23T10:46:02.423 回答