html - Bootstrap 下拉 RTL 对齐

Question

最近在 bootstrap 的最后一个版本 (3.2.0) 中，我刚刚意识到我们不能将 dropdowns 与 dir="rtl" 或 dir= 对齐"ltr" 所以我们必须手动完成，因为他们的 official blog says : (此功能从 3.1.0 版开始添加)

Dropdowns now have their own alignment classes for easier customization

那个类是什么？我如何制作一个从右到左的下拉列表？

Answer 1

Twitter Bootstrap 的新下拉对齐方式与您所追求的完全不同。它只会改变绝对定位下拉菜单的位置。 IE。它不会使下拉列表以 RTL(从右到左)模式出现。

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

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. Toright-align a menu, use .dropdown-menu-right. Right-aligned navcomponents in the navbar use a mixin version of this class toautomatically align the menu. To override it, use.dropdown-menu-left.

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

#RTL模式

What is that class and how can I make a dropdown list right to left?

为了实现这一点，您可以为 .dropdown 元素提供 direction: rtl; 并覆盖默认的 text-align: left .dropdown-menu 与 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。}