ラベルとフィールドをブートストラップ形式で整列する

Question

次のシンプルなフォームがブートストラップにありますが、すべてを正しく整列させるために苦労しています。フィールドを互いに垂直に揃えるにはFrom & Toが並んでいますか？

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    
 
      <div class="col-md-12"> 
 
      <div class="span12"> 
 
       <div class="form-inline"> 
 
        <label for="check-in">DATE RAISED FROM</label> 
 
        <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
 
        <label for="check-out">TO</label> 
 
        <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 

 
     <div class="col-md-12"> 
 
      <div class="span12"> 
 
       <div class="form-inline"> 
 
        <label for="check-in">COLLECTION DATE FROM</label> 
 
        <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
 
        <label for="check-out">TO</label> 
 
        <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    
 
    </div> 
 
</div>

あなたはここにDEMOを見ることができます。

Answer 1

ラベルの幅は動的なので、両方がまったく同じテキストを持たなければ、並べて表示されません。自分で揃えるために、ブートストラップのグリッドを再生する：

<div class="row"> 
    <div class="col-xs-5">DATE RAISED FROM</div> 
    <div class="col-xs-3"> 
     <input type="text" placeholder="dd/mm/yyyy" /> 
    </div> 
    <div class="col-xs-1">TO</div> 
    <div class="col-xs-3"> 
     <input type="text" placeholder="dd/mm/yyyy" /> 
    </div> 
</div> 

はこのバイオリンをチェックアウト：などhttps://jsfiddle.net/wietsedevries/sg0gbuem/1/