当窗口变小时，导航栏图标向下跳跃

Question

当窗口变小时，我使用bootstrap.my导航栏图标跳下来。当它太小时，菜单会转到3line图标栏。 如何将我的图标设置为在小窗口中显示在一行中？

这是我的导航栏代码，

  <nav class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a class="navbar-brand" href="#">
                    <img id="brand-image" alt="" src="../image/fullLogo.png"/>
                </a>


            </div>


            <div class=" col-md-offset-2">
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">

                        <li>
                            <a href="../MainPages/avayejavid.html"    class="header-style">
                                <i class="fa fa-home li-header-style" aria-hidden="true" ></i>

                                خانه
                            </a>
                        </li>


                        <li class="dropdown ">
                            <a data-toggle="dropdown" href="#" class="header-style">
                                <i class="fa fa-file-o li-header-style" aria-hidden="true"></i>

                                معرفی <span class="caret "></span>
                            </a>
                            <ul class="dropdown-menu" style=" background-color: #9D763C">
                                <li>
                                    <a href="../MainPages/bio.html" class="header-style">بیوگرافی</a>
                                </li>
                                <li>
                                    <a href="../MainPages/ava-members.html" class="header-style">اعضای گروه</a>
                                </li>

                            </ul>
                        </li>



                        <li>
                            <a href="../MainPages/gallery.html" class="header-style">
                                <i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>

                                گالری

                            </a>
                        </li>


                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#" class="header-style">
                                <i class="fa fa-file-o li-header-style" aria-hidden="true"></i>

                                ویدئو <span class="caret "></span>
                            </a>
                            <ul class="dropdown-menu" style=" background-color: #9D763C">
                                <li>

                                    <a href="../MainPages/training.html" class="header-style">آموزش</a>
                                </li>
                                <li>

                                    <a href="../MainPages/tasnif1.html" class="header-style">تصنیف خوانی</a>
                                </li>

                                <li>
                                    <a href="../MainPages/saz-va-avaz1.html" class="header-style"> ساز و آواز</a>
                                </li>

                            </ul>
                        </li>

                        <li>
                            <a href="../MainPages/Articles.html" class="header-style">
                                <i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>

                                مقالات

                            </a>
                        </li>


                        <li>
                            <a href="../MainPages/movie.html" class="header-style">
                                <i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>

                                خرید

                            </a>
                        </li>

                        <li>
                            <a href="#" class="header-style">
                                <i class="fa fa-comments li-header-style" aria-hidden="true"></i>

                                تماس با ما

                            </a>
                        </li>




                    </ul>

                </div>

            </div>

        </div>



    </nav>

这是我的CSS：

 .header-style{
           padding-top:20px !important;
           background-image:url(../images/icon.png);
            background-size: 100% 100% !important;
            padding-left:40px !important;
            padding-right:40px !important;
       }
       .li-header-style{
           color:#ffe766
       }
.navbar-fixed-top .nav {
    padding: 15px 0;
}

@media (max-width:767px) { 
    .navbar-brand {
        padding: 0;        
    }

   .navbar-brand img {
        margin-top: 1px;
        margin-left: 1px;
    }
}


 .navbar-nav li a {
  height:80px;


}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}


        .navbar .nav > li.dropdown.open.active > a:hover,
        .navbar .nav > li.dropdown.open > a {
            color: #ffe766 !important;
            background-color: transparent !important;
            border-color: #ffe766 !important;
        }
         #brand-image
        {
            height:100px;

        }

Answer 1

问题是图标占用了指定断点的太多空间。

我建议更彻底地阅读引导文档（尤其是网格系统）：http://getbootstrap.com/css/#grid-media-queries

要解决您的问题，您需要增加.navbar断点。这里解释得非常好：https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint。

您还可以查看以前的答案，以帮助您：Change bootstrap navbar collapse breakpoint without using LESS