展开搜索栏全宽bootstrap 3？

Question

我正在按以下顺序实现包含元素的导航栏： LOGO SEARCH-BAR MENU登录。

我使用以下代码完成了此操作：

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed"
                data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
<!--LOGO-->
            <a class="navbar-brand hidden-xs" href="#"> <img
                src="#" title="title" border="0">
            </a> <a class="navbar-brand visible-xs" href="#">Brand
<!--SEARCH BAR-->
            <form class="navbar-form navbar-left">

                <div style="display: table;" class="input-group">
                    <input type="text" autofocus="autofocus" autocomplete="off"
                        placeholder="Search Here" name="search" style=""
                        class="form-control"> <span style="width: 1%;"
                        class="input-group-addon"><span
                        class="glyphicon glyphicon-search"></span></span>

                </div>
            </form> 

        </div>

<!--MENU and SIGN--->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown"><a href="#" class="dropdown-toggle"
                    data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">Categories <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                            <li><a
                                href="#"></a></li>
                            <li><a
                                href="#"></a></li>
                    </ul></li>
                <li><a href="#">Something</a></li>
                <li><a href="#">...</a></li>

                <li>
                    Sign in
                </li>

            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

我通过添加以下CSS将导航栏折叠宽度更改为990px​​：

/* Navbar COLLAPSE at 990px instead of default 768 px*/

    @media ( max-width : 990px) {

        .navbar-header {
            float: none;
        }
        .navbar-left, .navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-nav {
            float: none !important;
            margin-top: 7.5px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .collapse.in {
            display: block !important;
        }

        /*width:auto for dropdowns to take full spacing between 768px and 990px. (Default takes full spacing below 768px)*/

        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        /* For dropdown eg: Categories to be listed centered. (Default left aligned) */

        .dropdown-menu {
            text-align: center;
        }
    }

如果有空位，我希望SEARCH-BAR采用全宽。

这种情况发生在宽度小于990px（我编辑过的媒体查询）的情况下，但是对于大于990像素的搜索栏，搜索栏不会占用整个间距。它的宽度是默认大小。

我想我需要为990px媒体查询编辑navbar-form，但似乎无法使其正常工作。

感谢任何帮助。我是造型新手。