【问题标题】:Bootstrap dropdown RTL alignmentBootstrap 下拉 RTL 对齐
【发布时间】:2014-09-21 20:40:48
【问题描述】:

最近在 bootstrap (3.2.0) 的最后一个版本中,我刚刚意识到我们无法将 dropdownsdir="rtl"dir="ltr" 对齐,因此我们必须像他们的 official blog says 一样手动执行此操作:(此功能从 3.1.0 版添加)

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

该类是什么?如何从右到左制作下拉列表?

【问题讨论】:

  • 其实last版本目前是v3.2.0。
  • @HashemQolami 是的,这发生在 3.1.0 版

标签: html css twitter-bootstrap twitter-bootstrap-3 right-to-left


【解决方案1】:

Twitter bootstrap 的新下拉对齐方式与您所追求的完全不同。

它只会改变absolutely 定位的下拉菜单的位置。 IE。它不会使下拉菜单以 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。右对齐导航 导航栏中的组件使用此类的混合版本 自动对齐菜单。要覆盖它,请使用 .dropdown-menu-left.

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

RTL 模式

那个类是什么,我怎样才能从右到左制作一个下拉列表?

为了实现这一点,您可以将direction: rtl; 赋予.dropdown 元素,并将.dropdown-menu 的默认text-align: left 替换为text-align: right1

此外,您还必须通过.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>

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

【讨论】:

    【解决方案2】:

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

    见讨论hereexamples at Bootstrap page

    【讨论】:

      【解决方案3】:

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

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

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

      我希望这会有所帮助。

      【讨论】:

        猜你喜欢
        • 2021-02-19
        • 2014-12-09
        • 2015-12-26
        • 1970-01-01
        • 1970-01-01
        • 2019-03-27
        • 2015-01-28
        • 2013-02-13
        • 2018-05-30
        相关资源
        最近更新 更多