css - 用于 RTL 语言的 Twitter Bootstrap 向右拉和向左拉

Question

在 Twitter bootstrap 3 中，我的 div 中有一些字形图标，我为默认页面添加了“向右拉”。当我将方向更改为 RTL 文本等时，翻转成功但右拉不会切换到左拉。我应该怎么做才能让 LTR 的右侧图标和 RTL 的左侧图标？

(当然可以添加 javascript 代码并检查页面主体中的所有拉权并将它们更改为左拉，但我不喜欢 JS 解决方案。我尝试了 this 但它没有帮助。)

fiddle : 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');
    });
});

希望这对您有所帮助。