twitter-bootstrap 用于 RTL 语言的 Twitter Bootstrap 右拉和左拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23336065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap pull-right and pull-left for RTL languages
提问by trante
In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages. When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left. What should I do to have an icon in right for LTR and in left for RTL ?
在 Twitter 引导程序 3 中，我的 div 中有一些字形，并为默认页面添加了“向右拉”。当我将方向更改为 RTL 文本等时，会成功翻转但右拉不会切换到左拉。我应该怎么做才能在 LTR 右侧有一个图标，在 RTL 左侧有一个图标？
(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried thisbut it didn't help.)
（当然可以添加javascript代码并检查页面正文中的所有pull-rights并将它们更改为pull-left，但我不喜欢JS解决方案。我试过这个，但没有帮助。）
Fiddle: http://jsfiddle.net/mavent/dKPE3/1/
小提琴：http: //jsfiddle.net/maven/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>
回答by Karim AG
You can override .pull-rightclass to float to the left when it appears after an rtl element.
当.pull-rightclass 出现在 rtl 元素之后时，您可以覆盖class 以浮动到左侧。
Like this:
像这样：
.rtl {
direction: RTL;
}
.rtl .pull-right {
float:left !important;
}
And your div element:
还有你的 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>
Here is a FIDDLE
这是一把小提琴
Alternatively, you can do it using javascript: (Using your same code just add javascript)
或者，您可以使用 javascript 来完成：（使用相同的代码只需添加 javascript）
$(document).ready(function() {
$('.pull-right').each(function() {
if($(this).parent().css('direction') == 'rtl')
$(this).attr('style', 'float:left !important');
});
});
Hope this helps.
希望这可以帮助。
回答by 4dgaurav
回答by jordan
回答by MK.
You could use RTLCSSto generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).
您可以使用RTLCSS生成 CSS 的完整 RTL 版本，它使您能够扩展其功能以支持自定义场景。此外，它还支持 CSS3 转换（矩阵、平移、旋转等）。
