RTL模式

Question

最近在bootstrap（3.2.0）的最后一个版本中，我刚刚意识到我们无法将dropdowns与dir="rtl"或dir="ltr"对齐，因此我们必须手动执行{{1}} {3}} :(此功能从3.1.0版添加）

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

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

Answer 1

Twitter引导程序的新下拉列表与您之后的版本不同。

它只会更改absolute定位下拉菜单的位置。即它不会使下拉列表出现在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。右对齐导航   导航栏中的组件使用此类的mixin版本   自动对齐菜单。要覆盖它，请使用   .dropdown-menu-left。

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

RTL模式

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

为了实现这一点，您可以将direction: rtl;提供给.dropdown元素，并使用text-align: left ^{1覆盖.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。}

Answer 2

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

参见讨论here和examples at Bootstrap page

Answer 3

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

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

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

我希望这会有所帮助。

Bootstrap下拉RTL对齐

3 个答案:

RTL模式