C# 窗口变小时导航栏图标会向下跳

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

这是我的导航条码

  <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>

---

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

我建议更彻底地阅读引导文档（尤其是网格系统）：

要解决问题，您需要增加

.navbar

断点。这在这里得到了很好的解释：

---

您也可以查看前面的答案来帮助您：

您可以使用一些自定义css代码和媒体查询来最小化菜单中的形状我在问题中添加了导航栏css。您能解释一下如何解决此问题吗？谢谢您使用的是哪种引导版本@mndnBootstrap RTL v3.1.1

 .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;

        }