什么标签控制间距和放置位置？

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 的单个类将以各种方式应用于所有子 div。那么，我需要什么标签，我应该把它放在哪里才能获得输入组的间隙？

Answer 1

在表单中的组之间应用边距的类是.form-group。 Bootstrap says:

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

所以在你的情况下：

正规形式

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

这里唯一的问题是您使用的是.form-horizontal。当你这样做时，Bootstrap 对.form-control 应用一个负的左右边距，因为它希望你使用.col-xs-4 （或其他）来排列你的字段。所以我建议你要么不要在表单中使用 .form-horizontal 类，要么添加一个 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>

Demo(s)