Question

我有以下代码，如果我将这两个导航栏保持为静态，这似乎有效：

<html>
  <head>
  <link href="./static/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="./static/css/main.css" rel="stylesheet">
    <link href="./static/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body >
    <div class="bothnavbars">
      <nav class="navbar navbar-default navbar-static-top nav1" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="container-fluid">
            <div class="navbar-header ">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"></span> Name</a>
            </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Sub menu link1</a></li>
          </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- ./container-fluid -->
  </nav>
  <nav class="navbar navbar-default navbar-static-top nav2" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="container-fluid">
        <div class="navbar-header ">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"> Name</a>
        </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Sub menu link1</a></li>
          </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- ./container-fluid -->
  </nav>
</div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <div class="blockcontent">
Content
    </div>
  </body>
</html>

我在main.css中添加的CSS是：

.nav1 {
    margin-bottom:10;
}

.nav2 {
    top:0;
}

.blockcontent{
padding-top: 180px;
}

现在，如果我想将两个导航栏固定在顶部，我会更改

<nav class="navbar navbar-default navbar-static-top nav1" role="navigation">

到

<nav class="navbar navbar-default navbar-fixed-top nav1" role="navigation">

nav2相同。我将nav2类更改为

.nav2 {
    top:60;
}

现在页面看起来不错，但是当我缩小浏览器大小并单击按钮查看菜单时，第一个导航栏无法正常运行。任何想法如何解决这个问题？

Answer 1

您遇到的问题是navbar-fixed-top将left和right位置都声明为0，因此实际上第二个导航与第一个导航重叠，因为它占据了整个屏幕宽度

要解决此问题，请添加以下代码：

<强> HTML

<div class="bothnavbars">
     <div class="navbar navbar-default navbar-fixed-top nav1">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>
  <div class="navbar navbar-default navbar-fixed-top nav2">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>
</div>

    <div class="blockcontent">
Content
    </div>

和CSS：

.nav1 {
    position:fixed; top:60; width:50%; left:0; right:50% !important
}
.nav2 {
    position:fixed; top:60; right:0; width:50%; left:50% !important
}

我已经更改了您的HTML代码，因为它也有错误，因此我添加了一些易于查看的HTML，以便您可以看到它的工作方式并根据需要进行替换，您可以看到Bootply sample here

对于导航堆叠一个，将给定的CSS更改为：

/* CSS used here will be applied after bootstrap.css */
.nav1 {
    position:fixed; top:0; 
}
.nav2 {
    position:fixed; top:50px; background:#fc0 
}
@media handheld, only screen and (max-width: 767px) {
  .nav1, .nav2{position:relative; top:0}
.nav2{top:-20px;}
}

请参阅Bootply（注意：为了可视化目的添加了背景颜色，但当然不需要）

Bootstrap 3：两个带固定顶部的可折叠导航栏？

1 个答案: