css - Bootstrap 3.0.3 & 3.2.0 区别

Question

相同的代码在 bootstrap 3.0.3 和 3.2.0 版本中产生不同的结果

<div class="form-inline">
    <div class="form-group">
        <label>Date: </label>
        <input name="startdate" class="form-control" type="date">
    </div>
    <div class="form-group">
        <label>Optional Search String: </label>
        <input class="form-control" type="text">
    </div>
  <div class="form-group" style="vertical-align:bottom">
        <button type="button" class="btn btn-primary">Search</button>
  </div>
</div>

3.0.3 3.0.3 example

3.2.0 3.2.0 example

如何使用新版本的 bootstrap 实现相同的布局？

Answer 1

使用 width: auto; 而不是 width: 100%; 到 .form-inline .form-control - DEMO

CSS:

.form-inline .form-control {
    width: auto;
}

[编辑]

根据您的旧版本，width:auto; 仅用于媒体 min-width:768px:- DEMO

@media (min-width:768px) {
    .form-inline .form-control {
        display:inline-block;
        width:auto;
        vertical-align:middle
    }
}