Twitter Bootstrap内联表单间距

Question

这是一个JSFiddle,显示我的代码在行动.

我想使用Twitter Bootstrap 3考虑响应性,以最正确的方式在表单的不同部分之间添加几个像素的间距.我查看了文档,但我仍然不清楚实现这一目标的最佳方法是什么.

有任何想法吗？

这是我目前的表单HTML:

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="timezone">Timezone</label>
    <select class="form-control" id="timezone" name="timezone">
      <option value="America/St_Lucia">America/St_Lucia</option>
      <option value="Europe/Nicosia">Europe/Nicosia</option>
    </select>
  </div>

  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>

  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>

  <button class="btn" type="submit">Save</button>
</form>

Answer 1

您可以尝试与margin所有直接儿童 .form-inline:

.form-inline > * {
   margin:5px 3px;
}

查看这个小提琴http://jsfiddle.net/MFKBj/10/

PD:我只是添加!important了小提琴,让我确定它是在你不需要的引导程序CSS上.

Answer 2

以下是使用Bootstrap Grid系统的示例.您可以应用一堆类来处理不同的视口.

<form class="form-inline" role="form">
  <div class="form-group row">
    <div class="col-md-6">
      <label class="sr-only" for="timezone">Timezone</label>
      <select class="form-control" id="timezone" name="timezone">
        <option value="America/St_Lucia">America/St_Lucia</option>
        <option value="Europe/Nicosia">Europe/Nicosia</option>
      </select>
    </div>
    <div class="col-md-3"">
      <label class="radio-inline">
        <input id="timeformat-0" name="timeformat" value="24" type="radio" />
        19:00
      </label>
    </div>
    <div class="col-md-3">
      <label class="radio-inline">
        <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
        7:00 PM
      </label>
    </div>
    <button class="btn" type="submit">Save</button>
  </div>
</form>