Question

我遇到的问题是我希望第二个带有类navbar2的导航栏也固定在div class="col-xs-10"中，这样它下面的内容就可以轻松滚动而无需移动导航栏2.另一个问题是当navbar2被修复时，宽度不能保持在不同大小的屏幕上。工作代码在这里https://jsfiddle.net/0sqk00Lw/4/ ..有人可以提供帮助..提前致谢

<nav class="navbar navbar-default navbar-fixed-top navbar1">
<div class="container">
    NAVBAR FIXED TOP
</div>
</nav>
<div class="row">
<div class="col-xs-2" style="background-color:blue">
    hello 
</div>

<div class="col-xs-10">
    <nav class="navbar navbar-default navbar-static-top navbar2">
       <div class="container">
          NAVBAR FIXED TOP
       </div>
    </nav>
    <p>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    </p>
</div>

Answer 1

看看这个小提琴。 https://jsfiddle.net/h7fjtbhz/

所有元素都更改为100％宽度和p标记的计算高度

height:calc(100% - 100px);  // change 100px to height of remaining elements above the second navbar

告诉我是否需要更改某些内容。

Answer 2

.navbar2{
  position:relative;
  width:100%;
  background-color:#fed136;
}

如果您将位置设置为相对，则无法修复。它需要位置：固定要设置。然后你必须将它相对于视口（而不是父元素）

定位

在不同位置添加2个固定导航栏

2 个答案: