Html Twitter Bootstrap 内联表单间距

Twitter Bootstrap inline form spacing

提问by Peter Sampras

Here is a JSFiddle showing my code in action.

这是一个 JSFiddle，显示了我的代码在运行中。

I want to add a few pixels of spacing between the different parts of the form in the most correct way using Twitter Bootstrap 3 taking responsiveness into consideration. I've looked over the documentation, but it still isn't clear to me what the best way to accomplish this is.

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

Any ideas?

有任何想法吗？

Here is my current form HTML:

这是我当前的表单 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>

回答by DaniP

You can try with marginto all direct childrens of .form-inline:

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

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

View this fiddle http://jsfiddle.net/MFKBj/10/

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

PD: I only add !importantin the fiddle to make me sure it's over the bootstrap CSS you don't need this.

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

回答by meavo

Here is an example of using the Bootstrap Grid system. You could apply a bunch of classes to handle the different viewports.

这是使用 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>

回答by Scott

I had the same question as the OP - he is asking about spacing things out horizontally - BS smashes things together pretty well as seen here. Here's my solution:

我和 OP 有同样的问题——他问的是水平间距——BS 把东西砸得很好，就像这里看到的那样。这是我的解决方案：

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

回答by Matthew Hudson

Here's how I've done it; add minimal spacing to all labels and controls, and use a negative margin on the container to keep everything correctly aligned.

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

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

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

回答by kR105

In Bootstrap 4 you have the Spacing utilities.

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

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

回答by Richard Jones

In Bootstrap 3, you can wrap the elements in a div.form-group, like so:

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

You can see this in this section of the Bootstrap 3 docs:

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

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

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