Bootstrap導航欄下拉菜單水平顯示菜單項

Question

我一直在進行一個新項目，其中導航欄必須位於頁面頂部。 我有以下html ...

<div class="navbar navbar-inverse navbar-fixed-top center">

    <div class="container navbar-inner">

            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Toggle Navigation</span>

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

            </div> <!-- //.navbar-header -->

            <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li><a href="#home">Home</a></li>

                    <li><a href="#about">About</a></li>

                    <li><a href="#project">Project</a></li>

                    <li><a href="#resume">Resume</a></li>

                    <li><a href="#contact">Contact</a></li>

                </ul>

            </div> <!-- //.collapse -->

        </div> <!-- //.container .navbar-inner -->

</div> <!-- //.navbar -->

和CSS，將菜單項設置為居中。

html, body {
margin: 0;
padding: 0;
width: 100%;
}

.container {
    margin: 0;
    padding: 0;
}

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}

但是，下拉切換功能似乎在中等屏幕尺寸時 水平顯示選項。 （無法發布圖片...信譽不足〜對不起！）

如何獲得下拉切換功能，以垂直顯示菜單項作為列表（默認值應如何顯示）， 而又不影響以桌面屏幕尺寸為中心的菜單項？ 任何幫助，將不勝感激！！

Answer 1

您應該將自定義CSS代碼包裝在媒體查詢中。

@media (min-width: 992px)將僅在桌面屏幕尺寸中影響元素。 了解有關網格系統的更多信息

 html, body { margin: 0; padding: 0; width: 100%; } .container { margin: 0; padding: 0; } @media (min-width: 992px) { .center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="container navbar-inner"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- //.navbar-header --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#project">Project</a> </li> <li><a href="#resume">Resume</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!-- //.collapse --> </div> <!-- //.container .navbar-inner --> </div> <!-- //.navbar -->