html - 使输入填满导航栏中的整个可用空间

Question

我的导航栏应该是这样的:

如您所见，有一个 logo、loop icon、clear icon 和 input field这两个图标之间的所有空间(无论分辨率如何)。

这是我的导航栏现在的样子:

我已经尝试了几种不同的方法来用 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>

希望对你有帮助。