哪个标签控制间距以及放置位置？

Question

我的表单使用引导标记。它或多或少地呈现出我想要的效果，但是输入组之间没有空间，如下图所示。数据绑定属性是敲除语法，但我认为它们在这个问题中并不重要。

<div style="width: 250px;">
  <form class="form-horizontal">
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-search"></i>
      </span>
      <input class="form-control" placeholder="foo NEAR bar" 
             data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
    </div>
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-step-backward"></i>
      </span>
      <input class="form-control" type="text" 
             data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
    </div>
      <div class="input-group input-group-lg">
        <span class="input-group-addon">
          <i class="icon-fixed-width icon-step-forward"></i>
        </span>
        <input class="form-control" type="text" 
               data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
      </div>
      <div class="btn-group btn-group-lg pull-right">
        <span class="btn btn-default"><i class="icon-download-alt"></i></span>
        <span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
      </div>
    </form>
  </div>

在这里，我们看到上述标记的结果。

Bootstrap非常全面，所以我想有一些标签可以控制它，但是文档中的示例非常简洁，我还没有找到任何类似的东西来为我提供线索。

通常，bootstrap的构造非常巧妙，因此应用于父div的单个类将以各种方式应用于所有子类。那么，我需要什么标记，我应该把它放在哪里，以便获得输入组的间隙行间距？

Answer 1

在表单中的组之间应用边距的类是。表单组。Bootstrap说：

不要将表单组直接与输入组混合。相反，将输入组嵌套在窗体组内。

所以在你的情况下：

范式

<div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon">
        <i class="icon-fixed-width icon-search"></i>
      </span>
      <input class="form-control" placeholder="foo NEAR bar" data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
    </div>
  </div>

这里唯一的问题是您正在使用。形成水平。执行此操作时，引导会将负的左右边距应用于。表单控件，因为它希望您使用来排列字段。col-xs-4（或其他）。因此，我建议您不要使用。在表单中形成水平类，或添加一个col-*类以固定负边距：

水平形式

<div class="form-group">
    <div class="col-xs-12">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">
          <i class="icon-fixed-width icon-search"></i>
        </span>
        <input class="form-control" placeholder="foo NEAR bar" 
               data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
      </div>
    </div>
  </div>

演示