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語言

回答

相關問題