html – Bootstrap 3.1.1导航栏最大化输入不再在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 cl 问题：如何在bootstrap 3.2.0导航栏中获得最大化的搜索输入？

在bootstrap 3.1.1中,我使用以下代码作为固定的底部导航栏来显示最大化的搜索输入.

<nav  role="seasrch">    <div >        <form >            <div >                <div >                    <div >                        <a href="#" ID="new_term"  role="button"><span ></span>&nbsp;&nbsp;New</a>                        <a href="/terms.PHP"  role="button"><span ></span>&nbsp;&nbsp;All</a>                    </div>                    <input type="input"  name="search_bar_text" />                    <div >                        <button ><span ></span></button>                    </div>                </div>            </div>        </form>    </div></nav>

它看起来像这样：

升级到bootstrap 3.2.0后,我的导航栏看起来像这样：

解决方法 我从3.1.1升级到3.2.0时遇到了同样的意外体验 – 我的(顶部)导航栏形式过去占据了屏幕的全宽,现在只是一个短元素.这是我在Boostrap之后加载的自定义CSS中有用的东西(这是我在保留原始干净缩小版本的同时覆盖bootstrap的方式)：

/* 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%;}

总结

以上是内存溢出为你收集整理的html – Bootstrap 3.1.1导航栏最大化输入不再在3.2.0中最大化全部内容，希望文章能够帮你解决html – Bootstrap 3.1.1导航栏最大化输入不再在3.2.0中最大化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。