Question

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

（当然可以添加javascript代码并检查页面正文中的所有拉取权限并将其更改为左拉，但我不喜欢JS解决方案。我试过this但它没有没帮忙。）

小提琴： 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');
    });
});

希望这有帮助。

Answer 2

我不知道这可能会对您有所帮助，但您可以使用 Demo ，即覆盖pull-right类< / p>

CSS

#div2 {
    direction: RTL;
}

#div2 .pull-right {
    float: left !important;
}

Answer 3

我建议调查这个library。它基于Bootstrap核心，包括从右到左的支持。

使用此独立library的另一种选择。

Answer 4

您可以使用RTLCSS生成CSS的完整RTL版本，它使您能够扩展其功能以支持自定义方案。此外，它还支持CSS3转换（矩阵，平移，旋转......等）。

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

4 个答案: