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

您可以margin向.form-inline的所有直接孩子尝试使用.form-inline > * { margin:5px 3px; }：

!important

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

PD：我只在小提琴中添加{{1}}，以确保它不在你不需要的引导程序CSS上。 的

Answer 2

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

<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>

Answer 3

我和OP有同样的问题 - 他问的是横向间隔东西 - BS把事情搞得很好as seen here。这是我的解决方案：

.form-inline label {
    margin-left: 5px;
}

Answer 4

在Bootstrap 4中，您拥有Spacing utilities。

/Resources

Answer 5

在Bootstrap 3中，您可以将元素包装在div.form-group中，如下所示：

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

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

您可以在Bootstrap 3文档的这一部分中看到这一点：

https://getbootstrap.com/docs/3.3/css/#forms-inline

Answer 6

我是怎么做到的;为所有标签和控件添加最小间距，并在容器上使用负边距以使所有内容保持正确对齐。

{{1}}

Twitter Bootstrap内联表单间距

6 个答案: