Question

我在使用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>

Answer 1

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

来自3.1 Docs ...

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

Bootstrap 3.1

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

Bootstrap 3.0.3

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

Answer 2

对于Bootstrap 3.3.6，我使用：

解决了它

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

引导程序3.1.0导航栏上的全宽输入组

2 个答案: