bootstrap 3.1.0 导航栏上的全宽输入组答案

【问题标题】：Full width input group on bootstrap 3.1.0 navbarbootstrap 3.1.0 导航栏上的全宽输入组
【发布时间】：2016-02-25 10:25:47
【问题描述】：

我在使用 bootstrap v3.1.0 时遇到了一些问题。我需要获得适合导航栏整个宽度的搜索栏（v3.0.3）：http://bootply.com/109727 但感觉输入组有一些问题，我明白了（v3.1.0）：http://bootply.com/109728 任何想法如何解决这个问题？还是有其他方法可以获得相同的结果？

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这个问题是.navbar-form .form-control 上的width:auto。你可以用width: 100% 覆盖它，它应该可以工作......

来自 3.1 文档...

请注意，.navbar-form 通过 mixin 与 .form-inline 共享其大部分代码。某些表单控件（如输入组）可能需要固定宽度才能在导航栏中正确显示。

引导 3.1

.navbar-form .form-control {
    display: inline-block;
    width: auto; /*This is the issue*/
    vertical-align: middle;
}

引导 3.0.3

.navbar-form .form-control {
    display: inline-block;
}

【讨论】：

width:100% 不适用于 v3.3.4，还有其他想法吗？

【解决方案2】：

对于 Bootstrap 3.3.6，我使用以下方法解决了它：

.navbar-form .input-group .input-group-btn {
    width: 1%;
}

【讨论】：