CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 用于RTL语言的Twitter Bootstrap pull-right和pull-left大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在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>

解决方法@H_262_13@
您可以覆盖.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');
    });
});

希望这可以帮助.

大佬总结

以上是大佬教程为你收集整理的css – 用于RTL语言的Twitter Bootstrap pull-right和pull-left全部内容,希望文章能够帮你解决css – 用于RTL语言的Twitter Bootstrap pull-right和pull-left所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。