最近在bootstrap的最新版本(3.2.0)中,我刚刚意识到我们无法将dropdowns
与dir="rtl"
或dir="ltr"
对齐,因此我们必须手动将其作为official blog says:(此功能是从版本3.1.0添加的)
下拉菜单现在具有自己的对齐类,以便于进行自定义
这是什么类,我如何使一个下拉列表从右到左?
最近在bootstrap的最新版本(3.2.0)中,我刚刚意识到我们无法将dropdowns
与dir="rtl"
或dir="ltr"
对齐,因此我们必须手动将其作为official blog says:(此功能是从版本3.1.0添加的)
下拉菜单现在具有自己的对齐类,以便于进行自定义
这是什么类,我如何使一个下拉列表从右到左?
5条答案
按热度按时间ahy6op9u1#
Twitter bootstrap新的下拉菜单对齐方式与你所追求的完全不同。它只改变了绝对定位下拉菜单的位置。也就是说,它不会使下拉菜单以RTL(从右到左)模式显示。
在v3.1.0之前,
.pull-right
用于将下拉列表移动到其包含块的右侧。但是从v3.1.0开始,它被.dropdown-menu-right
/.dropdown-menu-left
取代:不推荐使用。右拉对齐方式
从v3.1.0开始,我们已经弃用下拉菜单上的
.pull-right
。要右对齐菜单,请使用.dropdown-menu-right
。导航栏中右对齐的导航组件使用此类的混合版本来自动对齐菜单。要覆盖它,请使用.dropdown-menu-left
。但它不会给予前面提到的RTL效果。
RTL模式
这是什么类,我如何使一个下拉列表从右到左?
为了实现这一点,您可以将
direction: rtl;
赋予.dropdown
元素,并使用text-align: right
1覆盖.dropdown-menu
的默认值text-align: left
。此外,你还必须通过
.dropdown-menu-right
将绝对定位的下拉菜单移到右边。因此,你将得到如下结果:第一个
1我强烈建议使用一个额外的类名,以免更改Twitter Bootstrap的默认样式
.dropdown
。tp5buhyn2#
现在必须使用
.dropdown-menu-right
和.dropdown-menu-left
请参见Bootstrap页面上的讨论here和示例
bq3bfh9z3#
我创建了一个新的文件
_rtl.scss
并在引导后导入它。这是它的内容:这样,下拉菜单将始终从按钮的右侧打开。
我希望这对你有帮助。
mgdq6dx14#
这是使用rtl(阿拉伯语)和bootstrap 5示例:
1-在“html”标记元素上设置dir=“rtl”。
2-在“html”标记元素上添加一个适当的lang属性,如lang=“ar”。
3-对于下拉菜单rtl,只需使用“dropdown-menu-end text-end”类,如下所示:
我希望这对每一个使用bootstrap 5 rtl下拉菜单的人都有帮助。
ubby3x7f5#
为bootstrap 4在css样式上添加此内容