ブートストラップの書式設定の問題

Question

ブートストラップを使用してフォームを作成していて、解決できない間隔の問題があります。

は、ここに私のコードです：

<row> 
    <div class="col-md-offset-1 col-md-12 margin-bottom-5"> 
    <label class="col-md-4">24 Months</label> 
    <input type="text" readonly name="sum-lease24-mpp" class="sum-24mpp col-md-2" id="sum-lease24-mpp"><br /> 
    <input type="text" readonly name="sum-lease24-tpm" class="sum-24tpm col-md-2 margin-left-5" id="sum-lease24-tpm"><br /> 
    </div> 
</row> 

ここ

行は次のようになります。あなたが2番目のテキスト入力フィールドが少しダウンバンプされて見ることができるように

。誰かがなぜこれが起こっているのか、それをどうやって修正したらいいのか誰かに伝えることができますか

Answer 1

<div class="container"> 
    <row> 
     <div class="form-group col-md-offset-1 col-md-12 margin-bottom-5"> 
      <div class="control-label col-md-2"> 
       <label>24 Months</label> 
      </div> 
      <div class="col-md-2"> 
       <input type="text" readonly="readonly" name="sum-lease24-mpp" class="form-control sum-24mpp" id="sum-lease24-mpp"> 
      </div> 
      <div class="col-md-2"> 
       <input type="text" readonly="readonly" name="sum-lease24-tpm" class="form-control sum-24tpm col-md-4 margin-left-5" id="sum-lease24-tpm"> 
      </div> 
     </div> 
    </row> 
</div> 

Answer 2

私はあなたが私はあなたが<div class="row">なく<row>を意味と仮定しているブートストラップ3を使用していると仮定しています。

通常、ブートストラップを使用して同じ行にフォームを保持し、ラベル/入力の各グループをform-groupで囲むには、form-inlineを使用します。 （Inline formを参照してください）しかし、グリッドベースのサイジングが必要な場合は、実際にはフォームインラインで正しく機能しません。

各フォーム要素があまりにもform-controlでタグ付けする必要があります、またはブートストラップはかなり奇妙それをフォーマットします

（Control sizingを参照してください）あなたはまだ、このためにグリッドを使用することができますが、<div class="col-xx-xx"> の各要素をラップする必要があります。

<div class="row margin-bottom-5"> <!-- assuming margin-bottom-5 defined in CSS --> 
    <div class="col-md-4 col-md-offset-1"> 
     <!-- This isn't really a label for a single form element, is it? --> 
     <b>24 Months</b> 
    </div> 
    <div class="col-md-2"> 
     <!-- A label is expected for each form element. Use sr-only to hide it --> 
     <label for="sum-lease24-mpp" class="sr-only">Sum 24 MPP</label> 
     <input type="text" readonly name="sum-lease24-mpp" class="form-control sum-24mpp" id="sum-lease24-mpp"> 
    </div> 
    <div class="col-md-2 margin-left-5"> 
     <label for="sum-lease24-tpm" class="sr-only">Sum 24 TPM</label> 
     <input type="text" readonly name="sum-lease24-tpm" class="form-control sum-24tpm" id="sum-lease24-tpm"> 
    </div> 
</div>