请输入填写导航栏的全部可用空间

Question

下面是我的导航栏应该是：

正如你可以看到有一个logo，loop icon，clear icon和input field这需要那些之间的所有空间两个图标（不管分辨率如何）。

这里是我的导航栏现在的样子：

我尝试了好几种不同的aproches与input填补空白而不会破坏响应的功能，但我失败了。

我该如何让input field在每个屏幕上填充这两个图标之间的整个空间？

Here is plunker

Answer 1

你能与

<form class="navbar-form"> 
     <div class="form-group" style="display:inline;"> 
      <div class="input-group" style="display:table;"> 
      <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span> 
      <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
      <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-remove"></span></span> 
      </div> 

     </div> 
     </form> 

取代你的表格我希望它能帮助。