用于RTL语言的Twitter Bootstrap pull-right和pull-left

Question

在Twitter bootstrap 3中,我的div中有一些glyphicons,我为默认页面添加了"pull-right".当我改变RTL文本的方向等时成功翻转,但是右拉不会切换到左拉.我应该怎样做才能为LTR和左边的RTL设置一个图标？

(当然可以添加javascript代码并检查页面正文中的所有拉取权限并将它们更改为左拉,但我不喜欢JS解决方案.我试过这个但它没有帮助.)

小提琴:http: //jsfiddle.net/mavent/dKPE3/1/

<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

<div id="div2" class="alert alert-info">??? ?? ???? ??? ????? <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

Answer 1

.pull-right当它出现在rtl元素之后,您可以将类重写为浮动到左侧.

像这样:

.rtl {
    direction: RTL;
}
.rtl .pull-right {
    float:left !important;
}

你的div元素:

<div id="div2" class="alert alert-info rtl">
    ??? ?? ???? ??? ?????
    <span class="badge badge-info">122</span>
    <a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
        <i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
    </a>
</div>

这是一个FIDDLE

或者,你可以使用javascript :( 使用相同的代码只需添加javascript)

$(document).ready(function() {
    $('.pull-right').each(function() {
        if($(this).parent().css('direction') == 'rtl')
            $(this).attr('style', 'float:left !important');
    });
});

希望这可以帮助.