在Twitter bootstrap 3中,我的div中有一些glyphicons,我为默认页面添加了“pull-right”.
当我改变RTL文本的方向等时成功翻转,但是右拉不会切换到左拉.
我应该怎样做才能为LTR和左边的RTL设置一个图标？
当我改变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>
解决方法
您可以覆盖.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');
});
});
希望这可以帮助.
