Javascript 引导导航栏下拉列表水平显示菜单项

我一直在做一个新项目，要求导航栏位于页面顶部的中心。我有下面的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代码包装在媒体查询中

@媒体（最小宽度：992px）

将仅影响桌面屏幕大小中的元素。了解更多有关

html，
身体{
保证金：0；
填充：0；
宽度：100%；
}
.集装箱{
保证金：0；
填充：0；
}
@介质（最小宽度：992px）{
.center.navbar.nav，
.center.navbar.nav>li{
浮动：无；
显示：内联块；
*显示：内联；/*ie7修复*/
*缩放：1；/*hasLayout ie7触发器*/
垂直对齐：顶部；
}
.中间.导航栏内部{
文本对齐：居中；
}
}

切换导航

您应该将自定义CSS代码包装到媒体查询中

@媒体（最小宽度：992px）

将仅影响桌面屏幕大小中的元素。了解更多有关

html，
身体{
保证金：0；
填充：0；
宽度：100%；
}
.集装箱{
保证金：0；
填充：0；
}
@介质（最小宽度：992px）{
.center.navbar.nav，
.center.navbar.nav>li{
浮动：无；
显示：内联块；
*显示：内联；/*ie7修复*/
*缩放：1；/*hasLayout ie7触发器*/
垂直对齐：顶部；
}
.中间.导航栏内部{
文本对齐：居中；
}
}

切换导航

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