html – Bootstrap下拉RTL对齐

概述最近在bootstrap(3.2.0)的最后一个版本中,我刚刚意识到我们无法将下拉列表与dir =“rtl”ordir =“ltr”对齐,因此我们必须手动执行它们的 official blog says :(此功能从3.1版添加.0) Dropdowns now have their own alignment classes for easier customization 该课程是什么,如何从 最近在bootstrap(3.2.0)的最后一个版本中,我刚刚意识到我们无法将下拉列表与dir =“rtl”ordir =“ltr”对齐,因此我们必须手动执行它们的 official blog says :(此功能从3.1版添加.0)

Dropdowns Now have their own alignment classes for easIEr customization

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

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

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

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

07003

As of v3.1.0,we’ve deprecated .pull-right on dropdown menus. To
right-align a menu,use .dropdown-menu-right. right-aligned nav
components in the navbar use a mixin version of this class to
automatically 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?

为了达到这个目的,你可以给出方向：rtl;到.dropdown元素,并使用text-align：right1覆盖.dropdown-menu的默认text-align：left.

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

Example Here

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

<div >  <button  type="button" ID="dropdownMenu1" data-toggle="dropdown">    Dropdown    <span ></span>  </button>  <ul  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" ></li>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>  </ul></div>

1我强烈建议使用额外的类名,以免更改Twitter bootstrap的默认样式.dropdown.

总结

以上是内存溢出为你收集整理的html – Bootstrap下拉RTL对齐全部内容，希望文章能够帮你解决html – Bootstrap下拉RTL对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。