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

Question

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

按照this answer，我成功地创建了一个类似于我想要的布局，其中在输入字段的左侧包含一个“插件”图标 (see code here)。

但是：我不想让图标靠近输入框。

以下代码控制输入字段：

<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>

问题是删除<span class="input-group-addon">...</span> 以摆脱图标，会使输入字段收缩到更小的尺寸并松散圆边（这不太重要。see code here）。

当然，将单个输入字段包装在“输入组”中是没有意义的。但是删除“输入组”包装器会导致输入字段扩展并分成新行 (see code here)。

在查看了 Bootstrap.css 之后，我尝试创建一个新的 css 类来模仿 input-group 类的相关代码。这将带回导航栏中的内联输入字段，但仍不会使其扩展以占用所有可用空间 (see code here)。

我的问题是：如何在没有图标的情况下获得我想要的布局？
奖励：为什么要“输入组”和图标制作输入字段展开？

所需的浏览器兼容性：Chrome、Firefox、IE8+

Answer 1

这会让你到达你想去的地方

<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-?-?不是固定宽度，它是基于容器的百分比宽度。

Answer 2

用这个 html 替换：（对 glyphicon glyphicon-search 和 background-color，input-group-addon 的边框进行了更改）也做了圆形边缘:)

<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>

非常努力地达到您的要求。希望你能欣赏:)

Answer 3

嗯，过去大多数人不必使用表格进行设计，但在我开始的 99 年，表格创建了布局，我们使用间隔 .gifs 和各种废话进行设计。当您在容器上有一个 display:table 并且在其中的内容上有一个 display:table-cell 时，由于 .form-control 是空的，因此必须有其他东西来强制元素的宽度占用空间，或者它会像一个空单元格一样。所以你必须有一个空的跨度，上面有一些填充来强制它。

http://jsbin.com/aXOZEXi/1 -- 引导 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit -- 引导 3.2

.test {
  display:table;
}

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

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

HTML

<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>