垂直間隔のテキストボックス

Question

私はこのようになりますブートストラップ3で作成したform-horizontalを持っている：私は、ビューポートを縮小すると

私は、「スタート」を好きで、「終了」したいですテキストボックスには、それらの間に空白の隙間があります。しかし、彼らは一緒にしわくちゃされています。私は、フォームの残りの部分と矛盾に見える縦方向の空白を追加するために何ができる

？ここで

は私のHTMLとBootplyワークスペースです：http://www.bootply.com/sfB9elzbrC

<form class="form-horizontal" method="post" action=""> 
    <div class="form-group"> 
     <div class="col-sm-4"> 
      <label for="user_search">Who is this reservation for?</label> 
      <input id="user_search" name="selected_user_id" class="form-control"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-4"> 
      <label for="tool_search">Which tool will be used?</label> 
      <input id="tool_search" name="selected_tool_id" class="form-control"> 
     </div> 
    </div> 
    <label class="control-label" for="start">When will the reservation start and end?</label> 
    <div class="form-group"> 
     <div class="col-sm-4"> 
      <input id="start" name="start" class="form-control" type="text" placeholder="Start" autocomplete="off"> 
     </div> 
     <div class="col-sm-4"> 
      <input id="end" name="end" class="form-control" type="text" placeholder="End" autocomplete="off"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-8"> 
      <label for="additional_information">Would you like to include any additional information for the reservation? (For example, tool configuration settings).</label> 
      <textarea name="additional_information" class="form-control" id="additional_information" rows="4"></textarea> 
     </div> 
    </div> 
    <input type='submit' id="create_reservation" class="btn btn-default" value="Create reservation"> 
</form> 

Answer 1

は、これらのdiv要素にクラスを追加します。

<div class="col-sm-4 resv"> 
     <input id="start" name="start" class="form-control" type="text" placeholder="Start" autocomplete="off"> 
    </div> 

と間隔を追加する@mediaクエリを使用する：

@media only screen and (max-device-width: 480px) { 
    .resv {margin-top:10px;} 
} 

変更されたbootply：http://www.bootply.com/31cYqbtHEZ