在移動模式引導垂直對齊

Question

我創建這個jsbin，顯示問題和下文是標記：

<div class="row"> 
    <div class="col-sm-4 xs-12"> 
    <strong>UK Postcode</strong> 
    </div> 
    <div class="col-sm-4 xs-12"> 
    <strong>Other Field</strong> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-3 xs-12"> 
    <input class="form-input"/> 
    </div> 
    <div class="col-sm-1 xs-12"> 
    <strong>Or</strong> 
    </div> 
    <div class="col-sm-3 xs-12"> 
    <input class="form-input"/> 
    </div> 
</div> 

在倉中的元件在每一個模式中正確地對準但移動。

在移動模式下，我希望它們垂直堆疊，但我不確定如何讓other field標籤出現在Or標籤的下方，並高於移動模式下的正確輸入。

目前，它看起來像這樣在移動模式：

Answer 1

將您的HTML與一些引導程序的默認類一起更改爲此。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <label><strong>UK Postcode</strong></label> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-1"> 
 
     <div class="invisible hidden-xs"> 
 
     &nbsp; 
 
     <!-- Just to give similar white space above OR text but as well hide this gap in mobile devices. --> 
 
     </div> 
 
     <div class="form-group"> 
 
     <strong>OR</strong> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-4"> 
 
     <label><strong>Other Field</strong></label> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

檢查這個fiddle 你可以嘗試這樣的事情。

<div class="row"> 
    <div class="col-sm-3 xs-12"> 
    <label class="labels" for="fm1">UK Postcode</label> 
    <input class="form-input"/ id="fm1"> 
    </div> 
    <div class="col-sm-1 xs-12"> 
    <strong>Or</strong> 
    </div> 
    <div class="col-sm-3 xs-12"> 
    <label class="labels" for="fm2">Other Field</label> 
    <input class="form-input" id="fm2"> 
    </div> 
</div>