引導表單組行為小型設備

Question

在表單上使用表單組時遇到了一個問題，尤其是在sm視圖上，我不喜歡表單組內輸入字段之間的空間。

是否有一個簡單的解決方案來使表單組div內的輸入字段之間的間隙與不同表單組之間的間隔一樣寬？ 檢查下面的代碼和小提琴。

歡迎任何有用的提示！ 提前致謝。

編輯：我不是在尋找CSS解決方案，我可以自己做一個-我正在尋找一種正確的引導方式:)

屏幕截圖，內容簡短

http://jsfiddle.net/zb4dc/552/

<form id="test" class="form-horizontal" method="post">
  <fieldset>
    <div class="form-group">
      <label class="col-md-2 control-label" for="input_name">Name</label>
      <div class="col-md-4">
        <input id="input_name" name="input_name" type="text" placeholder="IMG_0202" class="form-control input-md">
      </div>
      <label class="col-md-2 control-label" for="input_title">Title</label>
      <div class="col-md-4">
        <input id="input_title" name="input_title" type="text" placeholder="San Francisco..." class="form-control input-md">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label" for="input_size">Size</label>
      <div class="col-md-4">
        <input id="input_size" name="input_size" type="text" placeholder="900x600" class="form-control input-md">
      </div>
      <label class="col-md-2 control-label" for="select_body">Camera Body</label>
      <div class="col-md-4">
        <select id="select_body" name="select_body" class="form-control">
          <?php select code ?>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label" for="input_iso">ISO</label>
      <div class="col-md-4">
        <input id="input_iso" name="input_iso" type="text" placeholder="100" class="form-control input-md">
      </div>
      <label class="col-md-2 control-label" for="select_lens">Camera Lens</label>
      <div class="col-md-4">
        <select id="select_lens" name="select_lens" class="form-control">
          <?php select code ?>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label" for="input_aperture">Aperture</label>
      <div class="col-md-4">
        <input id="input_aperture" name="input_aperture" type="text" placeholder="F/5.6" class="form-control input-md">
      </div>
      <label class="col-md-2 control-label" for="input_exposure">Exposure</label>
      <div class="col-md-4">
        <input id="input_exposure" name="input_exposure" type="text" placeholder="1/1000 sec" class="form-control input-md">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label" for="input_location">Location</label>
      <div class="col-md-4">
        <input id="input_location" name="input_location" type="text" placeholder="47.586319, 7.648753" class="form-control input-md">
      </div>
      <label class="col-md-2 control-label" for="input_createdate">Create date</label>
      <div class="col-md-4">
        <input id="input_createdate" name="input_createdate" type="text" placeholder="1986-04-23 13:37:00" class="form-control input-md">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label" for="submit"></label>
      <div class="btn-group col-md-4 col-xs-12" role="group">
        <button type="submit" id="submit" name="submit" class="btn btn-primary col-md-6 col-xs-6">Insert</button>
        <button type="reset" id="reset" name="reset" class="btn btn-default col-md-6 col-xs-6">Reset</button>
      </div>
    </div>
  </fieldset>
</form>

Answer 1

考慮一個表單組。 我想你正在嘗試這個

  <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_name">Name</label>
    <div class="col-md-4">
      <input id="input_name" name="input_name" placeholder="IMG_0202" class="form-control input-md" type="text">
    </div>
  </div>
    <div class="custom-margin">
    <label class="col-md-2 control-label" for="input_title">Title</label>
    <div class="col-md-4">
      <input id="input_title" name="input_title" placeholder="San Francisco..." class="form-control input-md" type="text">
    </div>
  </div>

在您的CSS中

.custom-margin{
 margin-bottom: 15px;
}

Answer 2

添加兩個div並在小屏幕上分配6列或更多列（取決於您希望輸入字段的大小）。 現在，將這兩個div視為用戶將在其屏幕上看到的兩列，然后分別在這些div中添加所需的字段。

例

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_name">Name</label>
        <div class="col-md-7">
            <input id="input_name" name="input_name" type="text" placeholder="IMG_0202" class="form-control input-md">
        </div>
    </div>
</div>

<div class="col-xs-7 col-md-4">
    <div class="form-group">
        <label class="col-md-2 control-label" for="input_title">Title</label>
        <div class="col-md-7">
            <input id="input_title" name="input_title" type="text" placeholder="San Francisco..." class="form-control input-md">
        </div>
    </div>
</div>

使用代碼的結果

使用解決方案代碼的結果