引导程序 3:两个带固定顶部的可折叠导航刀

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

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

导航 2 也是如此。我将 nav2 类更改为类似

.nav2 {
    top:60;
}

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

您遇到的问题是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 示例

对于导航堆叠一个，将给定的 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（注意：背景颜色是为了可视化目的而添加的，但当然不是必需的）

相关内容

最新更新

热门标签：