Twitter Bootstrap pull-right e pull-left per le lingue RTL

Question

In Twitter bootstrap 3, ho alcuni glyphicon nelle mie div e aggiungo "pull-right" per le pagine predefinite. Quando cambio direzione ai testi RTL ecc. Si gira correttamente ma pull-right non passa a pull-left. Cosa devo fare per avere un'icona a destra per LTR e a sinistra per RTL?

(Naturalmente è possibile aggiungere il codice javascript e controllare tutti i diritti di pull nel corpo della pagina e cambiarli in pull-left, ma io non preferisco la soluzione JS. Ho provato this ma non ha aiutato .)

Fiddle: 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> 

Answer 1

È possibile eseguire l'override della classe .pull-right per spostarsi a sinistra quando appare dopo un elemento rtl.

Ti piace questa:

.rtl { 
    direction: RTL; 
} 
.rtl .pull-right { 
    float:left !important; 
} 

E il tuo elemento 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> 

Ecco un FIDDLE

In alternativa, è possibile farlo utilizzando JavaScript: (Usando il vostro stesso codice basta aggiungere javascript)

$(document).ready(function() { 
    $('.pull-right').each(function() { 
     if($(this).parent().css('direction') == 'rtl') 
      $(this).attr('style', 'float:left !important'); 
    }); 
}); 

Spero che questo aiuti.

Answer 2

non so se questo potrebbe aiutare, ma è possibile utilizzare questo Demo, cioè ignorando l'pull-right classe

css

#div2 { 
    direction: RTL; 
} 

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

Answer 3

Io suggerirei di guardare in questo library. È basato sul core Bootstrap e il supporto da destra a sinistra è incluso.

Un'altra opzione per utilizzare questo stand alone library.

Answer 4

È possibile utilizzare RTLCSS per generare una versione RTL completa del CSS, offrendo la possibilità di estendere le sue funzionalità per supportare scenari personalizzati. Inoltre ha il supporto per le trasformazioni CSS3 (matrice, tradurre, ruotare ... ecc.).