引导3.1.0 navbar上的全宽度输入组

问题描述

我有一些麻烦与bootstrap v3.1.0。
我需要得到适合导航条的整个宽度的搜索栏，如下所示（v3.0.3）：
但是感觉就像输入组有些麻烦，我得到了（v3.1.0）：
任何想法如何解决这个问题？或者有另一种方法可以获得相同的结果？

I've got some troubles with bootstrap v3.1.0. I need to get search bar that will fit entire width of the navbar like this (v3.0.3): http://bootply.com/109727But it feels like there is some troubles with input group and I am getting that (v3.1.0): http://bootply.com/109728Any ideas how to fix that? Or is there another way to get same result?

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

推荐答案

这个问题是 ：auto 在 .navbar-form .form-control 。你可以用 width：100％覆盖它，它应该工作...

This issue is the width:auto on .navbar-form .form-control. You can override this with width: 100% and it should work...

。

Bootstrap 3.1

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

Bootstrap 3.0.3 b
$ b

Bootstrap 3.0.3

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

这篇关于引导3.1.0 navbar上的全宽度输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！