Bootstrap 3 Navbar中的灵活宽度输入字段

好吧,大多数人没有使用必须设计表,但在99年我开始时,表创建了布局,我们使用spacer .gifs和各种垃圾进行设计.当你有一个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" >
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>