Question

我一直致力于一个新项目，其中导航栏需要在页面顶部居中。我有以下的HTML ...

%p

和css，将菜单项设置为居中。

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

然而，下拉切换功能似乎在中等屏幕尺寸上显示水平选项。（不能张贴图片......信誉不够〜抱歉！）

如何让下拉切换功能将菜单项垂直显示为列表（默认值应如何）不影响菜单项以桌面屏幕大小为中心？任何帮助将不胜感激!!

Answer 1

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

@media (min-width: 992px)仅会影响桌面屏幕尺寸的元素。详细了解Grid system

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: