引导表单组行为小型设备

Question

我在表单上使用表单组时遇到了一个问题，尤其是在 sm 视图中，我不喜欢表单组内输入字段之间的空间。

是否有一种简单的解决方案可以使表单组 div 内的输入字段之间的间隙与不同表单组之间的空间一样宽？检查下面的代码和小提琴。

欢迎任何有用的提示！提前致谢。

编辑： 我不是在寻找 CSS 解决方案，我可以自己做一个 - 我正在寻找一种合适的引导方式 :)

screenshot with small description

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>

使用您的代码获得结果

使用解决方案代码的结果