【问题标题】：Bootstrap dropdown RTL alignmentBootstrap 下拉 RTL 对齐
【发布时间】：2014-09-21 20:40:48
【问题描述】：

最近在 bootstrap (3.2.0) 的最后一个版本中，我刚刚意识到我们无法将 dropdowns 与 dir="rtl" 或dir="ltr" 对齐，因此我们必须像他们的 official blog says 一样手动执行此操作：（此功能从 3.1.0 版添加）

下拉菜单现在有自己的对齐类，以便于自定义

该类是什么？如何从右到左制作下拉列表？

【问题讨论】：

其实last版本目前是v3.2.0。
@HashemQolami 是的，这发生在 3.1.0 版

标签： html css twitter-bootstrap twitter-bootstrap-3 right-to-left

【解决方案1】：

Twitter bootstrap 的新下拉对齐方式与您所追求的完全不同。

它只会改变absolutely 定位的下拉菜单的位置。 IE。它不会使下拉菜单以 RTL（从右到左）模式显示。

在 v3.1.0 之前，.pull-right 已用于将下拉菜单移动到其包含块的右侧。然而，从 v3.1.0 开始，它已弃用，取而代之的是 .dropdown-menu-right/.dropdown-menu-left:

Deprecated .pull-right alignment

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

但它并没有像前面提到的那样给出 RTL 效果。

RTL 模式

那个类是什么，我怎样才能从右到左制作一个下拉列表？

为了实现这一点，您可以将direction: rtl; 赋予.dropdown 元素，并将.dropdown-menu 的默认text-align: left 替换为text-align: right¹。

此外，您还必须通过.dropdown-menu-right 将绝对定位的下拉菜单向右移动。因此，您最终会得到这样的结果：

Example Here

.rtl { direction: rtl; }
.rtl .dropdown-menu-right { text-align: right; }

<div class="dropdown rtl">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

¹_{我强烈建议使用额外的类名，以免更改 Twitter Bootstrap 的默认样式 .dropdown。}

【讨论】：

【解决方案2】：

现在你必须使用.dropdown-menu-right 和.dropdown-menu-left

见讨论here和examples at Bootstrap page

【讨论】：

【解决方案3】：

我创建了一个新文件_rtl.scss 并在引导后将其导入。这是它的内容：

.dropdown-menu {
  text-align: start !important;
  float: right !important;
  left: initial !important;
  right: 0 !important;
}

这样下拉菜单将始终从按钮的右侧打开。

我希望这会有所帮助。

【讨论】：