Bootstrap下拉RTL对齐

Question

最近,在引导的最后一个版本(3.2.0),我才意识到,我们无法使dropdowns用dir="rtl"或dir="ltr"因此我们必须为自己做手工官方博客说:(从3.1.0版本中添加此功能)

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

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

Answer 1

Twitter引导程序的新下拉对齐方式与您之后的安静方式不同.

它只会改变absolute定位下拉菜单的位置.即它不会使下拉列表出现在RTL(从右到左)模式中.

在使用v3.1.0 .pull-right将下拉列表移动到其包含块的右侧之前.但是从v3.1.0开始,它被弃用而赞成.dropdown-menu-right/ .dropdown-menu-left:

不推荐使用.pull-right alignment

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

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

RTL模式

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

为了做到这一点,你可以给direction: rtl;的.dropdown元素,并覆盖默认text-align: left的.dropdown-menu用text-align: right¹.

此外,您还必须将绝对定位的下拉菜单移动到右侧.dropdown-menu-right.因此,你最终会得到这样的东西:

这里的例子

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