Css Bootstrap 3导航栏中的灵活宽度输入字段

我正在尝试创建一个包含输入字段的导航栏。我希望输入字段占据导航栏中的所有可用空间

接下来，我成功地创建了一个类似于我想要的布局，它在输入字段（）的左侧包含一个“addon”图标

但是：我不希望图标靠近输入字段。

以下代码控制输入字段：

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="input-group">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

问题在于，删除

…

以去除图标会使输入字段缩小到较小的大小，并使圆角松动（这一点不太重要）

当然，将单个输入字段包装在“输入组”中是没有意义的。但是删除“input group”包装器会导致输入字段展开并打断为新行（）

在查看Bootstrap.css之后，我尝试创建一个新的css类，它模仿

输入组的相关代码。这会在导航栏内联返回输入字段，但仍不会使其展开以占用所有可用空间（）


我的问题是：如果没有图标，我如何获得想要的布局？

奖金：为什么“输入组”和图标会使输入字段扩展

所需的浏览器兼容性：Chrome、Firefox、IE8+
这会让你达到你想要的程度

<div class="form-group" style="display:inline;">
    <div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
        <input class="form-control" type="text" placeholder="Search">
    </div>
</div>



它不会完全填满所有的空间，但它会填满大部分空间，并将搜索框居中，这样它看起来就不会不合适。添加了更动态的列大小额外的小屏幕使用下拉菜单，所以我重新调整了框的大小，以适应屏幕。要在描述时构建一个完全响应的页面，您可能应该将所有内容嵌套在一个网格中，因为col-？-？不是固定宽度它是基于其容器的百分比宽度。
替换为此html:（更改了glyphicon glyphicon搜索和背景颜色，输入组加载项的边框）也更改了圆边：）


切换导航




按钮1
按钮2
按钮3

为了达到你的要求，我非常努力。希望您能欣赏：）

大多数人过去不需要设计桌子，但在99年，当我开始设计的时候，桌子创造了布局，我们使用间隔棒、GIF和各种垃圾来设计。当容器上有一个display:table，容器内的内容有一个display:table单元格时，由于.form控件为空，因此必须有其他内容来强制元素的宽度占用空间，否则它将像一个空单元格一样工作。所以你必须有一个空的跨度，上面有一些填充物来强制它

--引导3.0-3.1
--引导3.2
HTML


谢谢您的建议，但它不起作用：（输入字段未居中，在调整屏幕大小时，它会打断成一条新行）。此外，我希望布局能够响应，并且能够容纳不同数量的链接和按钮；因此，在这种情况下，设置预定义的列大小不是一个好的解决方案。更新了我的答案，但应在网格系统上构建完全响应的布局。列大小不是固定宽度，而是基于视口及其父容器的大小。感谢您的努力。手动使不需要的部分不可见，确实是一种选择；但对我来说，这更像是一种黑客行为。我正在寻找一个更有效、更优雅的解决方案。还要注意，您的解决方案会在输入字段的两侧创建不均匀的空格，这也可以手动修复。不过，我也不想采用这种方法。很好，在这种情况下，table仍然做得最好。
<div class="container">

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Some Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar-collapsible">

        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>

        <div class="navbar-form navbar-right btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>

        <form class="navbar-form">
            <div class="form-group" style="display:inline;">
                <div class="input-group">
                  <span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
                  <input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
                </div>
            </div>
        </form>

    </div>

</div>
</nav>
</div>

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>