在引導

Question

的內聯表單輸入保留列順序與RTL CSS我有我的表格3列用於輸入用戶的電話：

<div class="col-md-5"> 
    <label class="control-label">Phone</label> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label> 
      <select class="form-control" name="phoneCode" id="phone_code"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 
     </div> 
     <span class="col-md-2 text-center">-</span> 
     <div class="col-md-6"> 
      <label for="phone_number" class="sr-only">phone number</label> 
      <input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}"> 
     </div> 
    </div> 
</div> 

http://www.bootply.com/jgFqaA4r6o

當我包括RTL引導CSS：

https://github.com/morteza/bootstrap-rtl

這翻轉列的順序，這在大多數情況下是所需的結果。不過，我希望手機輸入欄保持相同的順序（未更改）。

將左拉類包含在前兩列中可以修復問題，但會在調整屏幕大小（特別是縮小）時導致錯誤。 我曾嘗試使用/學習col，但我不知道如何讓它們在這裏工作。

有沒有人有任何建議？ 如果還有改進，我也願意改變總體佈局。 謝謝。

Answer 1

我改變了html，並用一個小小的「黑客」來解決這個問題。 這裏仍然可能有更好的解決方案。這是我的html：

<div class="col-md-5"> 
     <div class="col-sm-4 col-xs-12 pull-left"> 
      <label for="phone_code" class="control-label">phone code</label> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="col-sm-8 col-xs-12"> 
      <label for="phone_number" class="control-label">phone number</label> 
      <input type="tel" class="form-control"> 
     </div> 
    </div> 

http://www.bootply.com/tIW6xBHVGB

的 「黑客」 是 「col-xs-12」 類添加到<div>元素。如果沒有添加，由於「pull-left」類，div不會展開以佔據整行。

我很樂意聽取其他建議。