請輸入填寫導航欄的全部可用空間

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> 

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