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