html - Bootstrap 3内联布局不起作用

我在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">，但没有任何区别。我已经检查了三遍了。有人知道我做错了什么吗？
如果我强迫容器变宽，那么它看起来更接近我的预期。但我所看到的例子都没有做到这一点。我不想指定固定的宽度。

最佳答案

这是由于您使用的引导程序3版本所致。form-control类在v3.1.0的内联表单中更改为width: auto。因此，版本v3.0.0、v3.0.1、v3.0.2和v3.0.3都应该显示您看到的问题。在发布v3.1.0之后，它应该不再是一个问题。
从release notes开始：
#11836：随着表单验证更新，我们重置了一些关键的表单和图标样式：
所有内联表单中的.form控件都设置为width:auto；以防止.form组中的.form标签堆叠。
删除所有select.form-control设置，因为这些设置现在由上述更改继承
从字形图标中删除宽度：1em；，因为它实际上不可能覆盖。
任何介于3.1.0和当前3.3.6之间的版本都应该按预期工作。
也就是说，如果你不能升级，你仍然可以自己实现这一点。请参阅第三个片段。
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>

所有当前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
  }
}

关于html - Bootstrap 3内联布局不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38276116/