css - Twitter Bootstrap 内联表单间距

Question

Here is a JSFiddle showing my code in action.

我想使用 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

您可以尝试对 .form-inline 的所有直接子元素使用 margin:

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

查看此 fiddle http://jsfiddle.net/MFKBj/10/

PD:我只在 fiddle 中添加 !important 以确保它在 Bootstrap CSS 之上，您不需要它。