javascript - 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) 只会影响桌面屏幕尺寸的元素。了解更多关于 Grid system

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