css - Bootstrap 3 导航栏中的灵活宽度输入字段

Question

我正在尝试创建一个包含输入字段的导航栏。我希望输入字段占据导航栏中的所有可用空间。

正在关注 this answer ，我成功地创建了一个类似于我想要的布局，其中在输入字段 ( see code here) 的左侧包含一个“插件”图标。

但是:我不想要输入字段附近的图标。

下面的代码控制输入域:

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="input-group">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

问题是删除<span class="input-group-addon">...</span>摆脱图标，使输入字段收缩到更小的尺寸并松开圆形边缘(这不太重要。see code here)。

当然，将单个输入字段包装在“输入组”中是没有意义的。但是删除“输入组”包装器会导致输入字段扩展并换行 (see code here)。

在查看 Bootstrap.css 之后，我尝试创建一个新的 css 类，它模仿 input-group 的相关代码。类(class)。这会带回导航栏中的内联输入字段，但仍不会使其扩展以占据所有可用空间 ( see code here)。

我的问题是:如何在没有图标的情况下获得我想要的布局？
奖励:为什么“输入组”和使输入字段展开的图标？

要求的浏览器兼容性:Chrome、Firefox、IE8+

Answer 1

好吧，大多数人过去不必使用表格进行设计，但在 99 年我开始时，表格创建了布局，我们使用间隔 .gif 和各种废话来进行设计。当您在容器上有一个 display:table 并且在其中的内容上有一个 display:table-cell 时，由于 .form-control 是空的，因此必须有其他东西来强制元素的宽度占用空间，否则它会像一个空单元格一样。所以你必须有一个空的跨度，上面有一些填充来强制它。

http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

HTML

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>