引导3.1.0 navbar上的全宽度输入组 [英] Full width input group on bootstrap 3.1.0 navbar
问题描述
我有一些麻烦与bootstrap v3.1.0。
我需要得到适合导航条的整个宽度的搜索栏,如下所示(v3.0.3): http:/ /bootply.com/109727
但是感觉就像输入组有些麻烦,我得到了(v3.1.0): http://bootply.com/109728
任何想法如何解决这个问题?或者有另一种方法可以获得相同的结果?
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/109727 But it feels like there is some troubles with input group and I am getting that (v3.1.0): http://bootply.com/109728 Any 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...
。
作为标题,.navbar-form通过mixin与.form-inline共享大部分代码。某些表单控件(如输入组)可能需要固定宽度才能在导航栏中正确显示。
As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.
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上的全宽度输入组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!