Twitter Bootstrap 内联表单间距答案

【问题标题】：Twitter Bootstrap inline form spacingTwitter Bootstrap 内联表单间距
【发布时间】：2013-11-26 13:53:04
【问题描述】：

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>

【问题讨论】：

水平间距还是垂直间距？哪些元素需要进一步分开？
水平间距！我希望在下拉列表和单选按钮组之间添加大约 10 像素的空间，以及在单选按钮组和保存按钮之间添加一些空间。我不需要在单选按钮之间留出更多空间。
尝试使用引导网格 (getbootstrap.com/css/#grid)。
@meavo：我对使用网格犹豫不决的原因是因为我不想改变元素（或组）的宽度，我只想要它们之间的空间它们稍微宽一些。
您不会找到 Bootstrap 输入间距变量。随心所欲地应用 CSS。输入大小有 LESS 变量，但间距没有。

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

您可以尝试将margin 用于.form-inline 的所有直系子女：

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

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

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

【讨论】：

这在 Bootstrap 3 中不是必需的。您可以将元素包装在 div.form-group 中。例如，请参阅我的答案。

【解决方案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>

【讨论】：

【解决方案3】：

我和 OP 有同样的问题 - 他问的是关于水平间隔的问题 - BS 很好地将东西粉碎在一起 as seen here。这是我的解决方案：

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

【讨论】：

【解决方案4】：

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

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

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}

【讨论】：

我更喜欢你的回答，因为它提供了更好的整体间距

【解决方案5】：

在 Bootstrap 4 中，您有 Spacing utilities。

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

【讨论】：

【解决方案6】：

在 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

【讨论】：

这不提供问题正在寻找的间距。
不提供空间，已在原问题中使用