Bootstrap下拉RTL对齐

Question

最近在最新版的引导程序（3.2.0）中，我刚刚意识到我们无法将dropdowns与dir="rtl"或dir="ltr"对齐，因此我们必须手动将其作为official blog says ：（添加了此功能从3.1.0版开始）

下拉菜单现在具有自己的对齐类，可以更轻松地自定义

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

Answer 1

Twitter bootstrap的新下拉菜单与您追求的目标完全不同。

仅更改absolute位置的下拉菜单的位置。即它不会使下拉菜单以RTL（从右到左）模式显示。

在v3.1.0 .pull-right之前，已使用下拉列表将其移动到其包含块的右侧。但是，从v3.1.0版本开始，它成为[[deprecated，而赞成.pull-right / .dropdown-menu-right：

.dropdown-menu-right

自v3.1.0起，我们在下拉菜单中不推荐使用.dropdown-menu-left。至右对齐菜单，使用.dropdown-menu-left。右对齐导航导航栏中的组件使用此类的混合版本来自动对齐菜单。要覆盖它，请使用Deprecated .pull-right alignment。

但是它没有像前面提到的那样产生RTL效果。

RTL模式

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

为了实现这一点，您可以将.pull-right赋予.dropdown-menu-right元素，并用.dropdown-menu-left

1覆盖direction: rtl;的默认.dropdown。

此外，您还必须通过text-align: left向右移动绝对定位的下拉菜单。因此，您最终将得到如下结果：

.dropdown-menu

text-align: right

.dropdown-menu-right

1

^{我强烈建议使用其他类名，以免更改Twitter Bootstrap的默认样式Example Here。}

Answer 2

现在您必须使用

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

请参见讨论.dropdown和.dropdown-menu-right

Answer 3

我创建了一个新文件.dropdown-menu-left，并在引导后将其导入。这是其内容：

here

这样，下拉菜单将始终从按钮的右侧打开。
我希望这会有所帮助。