Twitter Bootstrap右拉和左拉用于RTL语言

在Twitter引导程序3中，我在div中添加了一些图形，并为默认页面添加了“右拉”。当我改变方向为RTL文本等成功翻转，但右拉不切换到左拉。我该怎么做才能让LTR右边的图标和左边的RTL？Twitter Bootstrap右拉和左拉用于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>

来源

2014-04-28 trante

如果您在Bootstrap v3.2.0（https://github.com/twbs/bootstrap/pull/12840）中使用即将推出的RTL支持，它当前会扭转'.pull-left/right'的方向。 – cvrebert

@trante简而言之，当文本正确的时候，你想要做的就是将图形向左移动，对吧？ –

您可以覆盖.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'); 
    }); 
});

希望这会有所帮助。

来源

2014-05-01 11:22:07

我不知道这是否会帮助你，但你可以使用这个Demo，即重写pull-right类

CSS

#div2 { 
    direction: RTL; 
} 

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

来源

2014-04-28 08:40:05 4dgaurav

我会建议寻找到这个library。它构建在Bootstrap内核上，并包含从右向左的支持。

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

来源

2014-04-30 22:14:42 Jordan

我试过“ratnic/bootstrap-rtl”它不起作用。我不喜欢使用这个分叉引导（http://zerox.me/projects/bootstrap3/）。 – trante

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

来源

2014-05-18 17:49:31

Twitter Bootstrap右拉和左拉用于RTL语言

回答

相关问题