使输入填充导航栏中的整个可用空间

Question

以下是我的导航栏的外观：

正如您所看到的那样，logo，loop icon，clear icon和input field占据了这两个图标之间的所有空间（无论分辨率如何）。< / p>

以下是我的导航栏现在的样子：

我尝试了几个不同的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>

我希望它有所帮助。