Bootstrap выпадающий RTL выравнивание

Question

В последнее время в последнем выпуске начальной загрузки (3.2.0), я просто понял, что мы не можем выровнять dropdowns с dir="rtl" или dir="ltr" поэтому мы должны сделать это вручную, так как их official blog says: (Эта функция добавлена ​​с версии 3.1 +0,0)

Dropdowns теперь имеют свои собственные классы выравнивания для облегчения настройки

что это класс, и как я могу сделать выпадающий список справа налево?

Answer 1

нового выравнивание выпадающего Twitter Bootstrap в тихом отличаются от того, что вы после этого для.

Он меняет положение 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 из .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