Bootstrap 3.1.1导航条最大输入不再在3.2.0中最大化 [英] Bootstrap 3.1.1 Nav Bar Maximized Input No Longer Maximized in 3.2.0

问题描述

问题：如何在Bootstrap 3.2.0导航栏中获得最大化的搜索输入？

在Bootstrap 3.1.1中，底部导航栏以显示最大化的搜索输入。

 < nav class =navbar navbar-default navbar-fixed-bottom role =seasrch> 
< div class =container> 
< form class =navbar-form> 
< div class =form-group> 
< div class =input-group input-group-sm> 
< div class =input-group-btn> 
< a href =＃id =new_termclass =btn btn-defaultrole =button>< span class =glyphicon glyphicon-leaf>< / span> & nbsp;& nbsp;新< / a> 
< a href =/ terms.phpclass =btn btn-defaultrole =button>< span class =glyphicon glyphicon-tree-deciduous< / span> & nbsp;& nbsp;全部< / a> 
< / div> 
< input type =inputclass =form-controlname =search_bar_text/> 
< div class =input-group-btn> 
< button class =btn btn-default>< span class =glyphicon glyphicon-search>< / span>< / button> 
< / div> 
< / div> 
< / div> 
< / form> 
< / div> 
< / nav> 
  

它看起来像这样：

我的导航栏看起来像这样，升级到Bootstrap 3.2.0：

$ b $我有同样意想不到的体验，我从3.1升级到3.2.0 - 我的（顶部）导航栏形式，以前采取全宽度屏幕现在只是一个短的元素。这是我在我的自定义CSS加载后Boostrap（这就是我如何覆盖Bootstrap，同时保留其原来的干净缩微版本）：

  / * Boostrap CSS 3.2.0在navbar形式有这些新行
不同于3.1.1 [所有在@media（最小宽度：768px）
所以这个行为只显示在更高的分辨率上] * / 
 .navbar-form .input-group {
 display：inline-table; 
 vertical-align：middle; 
} 
 .navbar-form .input-group .input-group-addon，
 .navbar-form .input-group .input-group-btn，
 .navbar- form .input-group .form-control {
 width：auto; / *这里是CULPRIT * / 
} 
 / **解决方案：在自定义CSS ** / 
 / *确保navbar窗体的输入组去100％，即全屏幕
来兑换显示：inline-table;它出现在3.2.0 * / 
 .navbar-form .input-group {
 width：100％; 
} 
 / * override width：auto;在3.2.0中出现
，对于addon或btn（我有一个addon）* / 
 .navbar-form .input-group .input-group-addon，
 .navbar-form .input-group .input-group-btn {
 width：1px; 
} 
 / *单独的.form-control并给它宽度：100％; * / 
 .navbar-form .input-group .form-control {
 width：100％; 
} 
  

Question: How can I get a maximized search input in a Bootstrap 3.2.0 nav bar?

In Bootstrap 3.1.1 I used the following code for a fixed bottom nav bar to display a maximized search input.

<nav class="navbar navbar-default navbar-fixed-bottom" role="seasrch">
    <div class="container">
        <form class="navbar-form">
            <div class="form-group">
                <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                        <a href="#" id="new_term" class="btn btn-default" role="button"><span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;New</a>
                        <a href="/terms.php" class="btn btn-default" role="button"><span class="glyphicon glyphicon-tree-deciduous"></span>&nbsp;&nbsp;All</a>
                    </div>
                    <input type="input" class="form-control" name="search_bar_text" />
                    <div class="input-group-btn">
                        <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</nav>

And it looked like this:

My nav bar looks like this, after upgrading to Bootstrap 3.2.0:

解决方案

I had the same unexpected experience as I upgraded from 3.1.1 to 3.2.0 - my (top) navbar-form which used to take full width of the screen was now just a short element. This is what worked for me in my custom CSS that loads up after Boostrap (that's how I override Bootstrap while preserving their original clean minified version):

/* Boostrap CSS 3.2.0 had these new lines in the navbar-form that
   were different from 3.1.1 [it's all in @media (min-width: 768px)
   so this behavior only shows up on higher resolutions] */
.navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
    width: auto;  /* HERE IS THE CULPRIT */
}
/** SOLUTION: in custom CSS **/
/* make sure navbar-form's input-group goes 100% i.e. full width of screen 
   to compliment the display: inline-table; that showed up in 3.2.0 */
.navbar-form .input-group {
      width: 100%;
}
/* override width: auto; that showed up in 3.2.0
   with at least 1px for the addon or btn (I had an addon) */
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn {
      width: 1px;
}
/* separate .form-control and give it width: 100%; */
.navbar-form .input-group .form-control {
        width: 100%;
}

这篇关于Bootstrap 3.1.1导航条最大输入不再在3.2.0中最大化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！