ブートストラップ3 - 小さなデバイスのグリッドシステムで余白/パディングなし

Question

私はブートストラップフォームを持っています。それは私のデスクトップに表示する必要がありますように表示されます。しかし、画面サイズをタブレットサイズ以下に変更すると、日付と件名の間に余白/余白がありません。

私は修正を知っていますが、それは問題ではありません。しかし、私は正しいブートストラップ構造を使用していないと思います。

<form action="" method="post"> 
    <div class="form-group"> 
     <div class="row"> 
      <div class="col-md-8"> 
       <label>Number</label> 
       <input type="text" name="number" id="number" value="" class="form-control" placeholder="Number"> 
      </div> 
      <div class="col-md-4"> 
       <label>Date</label> 
       <input type="text" name="date" id="date" value="" class="form-control" placeholder="Date"> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="row"> 
      <div class="col-md-8"> 
       <label>Subject</label> 
       <input type="text" name="subject" id="subject" value="" class="form-control" placeholder="Subject"> 
      </div> 
      <div class="col-md-4"> 
       <p style="margin-bottom: 5px;"><label>Private?</label></p> 
       <label class="radio-inline"><input type="radio" name="private" value="1">Yes</label> 
       <label class="radio-inline"><input type="radio" name="private" value="0">No</label> 
      </div> 
     </div> 
    </div> 
</form> 

誰も私がここで間違っていたことを教えてもらえますか？

Answer 1

実際にはいくつかの誤用があります。ここに例があります：

<form> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="form-group"> 
     <label>Label</label> 
     <input class="form-control" type="whatever"> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
     <label>Label</label> 
     <input class="form-control" type="whatever"> 
     </div> 
    </div> 
    </div> 
    <!--some more rows if you have, or whatever. This is just an example --> 
</form>