Bootstrap 3内联布局不起作用

Jonathan Wood 发表于 Dev

乔纳森·伍德

我在Bootstrap 3中使用以下标记。

<div class="row" style="margin-bottom: 12px">
    <form class="form-inline">
        <div class="form-group">
            <label for="startDate">Start Date:</label>
            <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
        </div>
        <div class="form-group">
            <label for="endDate">End Date:</label>
            <input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
</div>

根据我能找到的所有示例，这应该使所有内容都内联。但是，对我来说，标签显示在文本框的上方而不是侧面。

我尝试不使用括住标记<div class="row">。我也尝试使用<input type="text">代替，<input type="date">但是没有任何作用。我已经三重检查了标记。有人可以看到我在做什么吗？

如果我强迫容器变宽，则它看起来更接近我的预期。但是我所见过的例子都没有做到这一点。而且，我宁愿不指定固定宽度。

来自邻居

这是由于您使用的Bootstrap 3版本。该form-control班改为width: auto以串联形式内V3.1.0。因此，版本v3.0.0，v3.0.1，v3.0.2和v3.0.3都应该显示您所看到的问题。在v3.1.0发行之后，它应该不再是问题。

从发行说明中：

＃11836：随着表单验证更新，我们重置了一些关键的表单和图标样式：

内联表单中的所有.form-controls都设置为width：auto; 防止.form-label在.form-group中堆叠。

删除所有select.form-control设置，因为这些设置现在已被上述更改继承

去除宽度：1em；来自Glyphicons，因为几乎无法覆盖它。

在3.1.0和当前的3.3.6之间的任何版本都应该可以正常工作。

话虽如此，如果您不能升级，您仍然可以自己实现。请参阅第3个摘要。

v3.0.0问题的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="form-inline">
    <div class="form-group">
      <label for="startDate">Start Date:</label>
      <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
    </div>
    <div class="form-group">
      <label for="endDate">End Date:</label>
      <input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
  </form>

</div>

v3.1.0预期行为的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="form-inline">
    <div class="form-group">
      <label for="startDate">Start Date:</label>
      <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
    </div>
    <div class="form-group">
      <label for="endDate">End Date:</label>
      <input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
  </form>

</div>

使用v3.0.0进行修复的示例：

@media (min-width: 768px) {
  .form-inline .form-control {
    width: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="form-inline">
    <div class="form-group">
      <label for="startDate">Start Date:</label>
      <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
    </div>
    <div class="form-group">
      <label for="endDate">End Date:</label>
      <input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
  </form>

</div>

所有当前的`form-inline`CSS，以防万一：

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle
  }
  .form-inline .form-control-static {
    display: inline-block
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle
  }
  .form-inline .input-group .form-control,
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn {
    width: auto
  }
  .form-inline .input-group>.form-control {
    width: 100%
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle
  }
  .form-inline .checkbox,
  .form-inline .radio {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle
  }
  .form-inline .checkbox label,
  .form-inline .radio label {
    padding-left: 0
  }
  .form-inline .checkbox input[type=checkbox],
  .form-inline .radio input[type=radio] {
    position: relative;
    margin-left: 0
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0
  }
}