30

这是一个 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>
4

6 回答 6

38

您可以尝试使用margin以下所有直系子女 .form-inline：

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

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

PD：我只添加!important小提琴以确保它在你不需要的引导 CSS 之上。

于 2013-11-13T19:43:10.223 回答
6

这是使用 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>
于 2013-11-13T19:43:07.500 回答
3

我和 OP 有同样的问题——他问的是关于水平间隔的问题——BS 把事情很好地粉碎在一起，就像在这里看到的那样。这是我的解决方案：

.form-inline label {
    margin-left: 5px;
}
于 2016-06-21T19:17:25.533 回答
1

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

.form-inline {
    margin: 0 -3px;
}

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}
于 2017-01-09T10:17:40.230 回答
1

在 Bootstrap 4 中，您有Spacing 实用程序。

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>
于 2017-06-02T19:50:15.580 回答
0

在 Bootstrap 3 中，您可以将元素包装在 a 中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

于 2018-02-05T18:46:10.263 回答