Question

我的表单使用bootstrap标记。它按照我的意图或多或少呈现，但输入组之间没有空格，如下图所示。数据绑定属性是淘汰语法，但我不认为它们对于这个问题的目的是一种方式或另一种。

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

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

Rendered form

Bootstrap是非常全面的，所以我想有一些标签可以控制它，但文档是一个简洁的样本，我还没有发现任何类似的东西足以让我知道。

通常，bootstrap非常巧妙地构造，因此应用于（例如）父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)

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

1 个答案: