引导导航栏下拉，水平显示菜单项

Bootstrap navbar dropdown displaying menu-items horizontally

本文关键字：水平 显示 菜单项 导航      更新时间：2023-09-26

我一直在做一个新项目，其中导航条需要位于页面顶部的中心。我有以下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;
}

然而，下拉切换功能似乎显示选项水平在中等屏幕尺寸。(不能发图片…声望不够~对不起!)

如何让下拉切换功能显示菜单项垂直作为一个列表(如何默认应该是)而不影响菜单项被集中在桌面屏幕尺寸?任何帮助都会很感激!!

您应该在媒体查询中包装您的自定义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 -->

相关文章：