Twitter Bootstrap kéo-phải và kéo-trái cho các ngôn ngữ RTL

Question

Trong Twitter bootstrap 3, tôi có một số glyphicons trong divs của tôi và tôi thêm "kéo-phải" cho các trang mặc định. Khi tôi thay đổi hướng sang văn bản RTL, v.v. flips thành công nhưng kéo-phải không chuyển sang kéo sang trái. Tôi nên làm gì để có biểu tượng ở bên phải cho LTR và ở bên trái cho RTL?

(Tất nhiên có thể thêm mã javascript và kiểm tra tất cả các quyền kéo trong nội dung trang và thay đổi chúng thành kéo sang trái, nhưng tôi không thích giải pháp JS. Tôi đã thử this nhưng không giúp được .)

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

Bạn có thể ghi đè .pull-right lớp để di chuyển sang trái khi nó xuất hiện sau phần tử rtl.

Như thế này:

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

Và phần tử div của bạn:

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

Đây là một FIDDLE

Ngoài ra, bạn có thể làm điều đó bằng javascript: (Sử dụng cùng của bạn mã chỉ cần thêm javascript)

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

Hy vọng điều này sẽ hữu ích.

Answer 2

tôi không biết nếu điều này có thể giúp bạn nhưng bạn có thể sử dụng này Demo, tức là trọng lớp pull-right

css

#div2 { 
    direction: RTL; 
} 

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

Answer 3

Tôi muốn đề nghị xem xét library này. Nó được xây dựng trên lõi Bootstrap và hỗ trợ từ phải sang trái.

Một tùy chọn khác để sử dụng độc lập library này.

Answer 4

Bạn có thể sử dụng RTLCSS để tạo phiên bản RTL hoàn chỉnh cho CSS của mình, Nó cung cấp cho bạn khả năng mở rộng chức năng của nó để hỗ trợ các tình huống tùy chỉnh. Cộng với nó có hỗ trợ cho các biến đổi CSS3 (ma trận, dịch, xoay ... vv).