0

我需要在顶部导航栏下方放置一个 div，它不应像导航栏一样随页面内容滚动。

我尝试将其创建为第二个导航栏，但它仍在滚动或导致两个导航栏上方出现空白区域。

我怎样才能做到这一点？

更新

在此示例中，绿色条位于导航栏的顶部，但我需要它保持在导航栏下方：http: //jsfiddle.net/julianonunes/y8YqK/

如果我将绿色条形码（下面的代码示例）移动到导航栏之前，它会被导航栏隐藏。

前任：

<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a>

    </div>
</div>
4

3 回答 3

0

你可能已经尝试过了，但是在第二个导航栏的 css 中

position: fixed;

如果你不想添加到你的样式表，你可以像这样把它放在 div 中：

<div style="position: fixed;"> </div>

我不确定，但您可能还必须像这样添加 display:block：

<div style="position: fixed; display: block;"> </div>

使用 Bootstrap，在他们的 html/css 中使用这个逻辑：

<div class="navbar" style="position: fixed; display: block;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

我最后的猜测：

<div class="navbar" style="margin-top: 10px;">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

希望其中一部作品。

于 2013-11-10T14:52:07.043 回答
0

好的。问题是您的第二个 div 包含“navbar-fixed-top”，它将它粘在屏幕顶部。您不希望它固定在顶部 - 您只希望它固定在主导航栏下方。将第二个 nag 的 html 更改为：

<div class="navbar navbar-default navbar-remote navbar-decoration ">

并添加到您的导航栏装饰类：

width: 100%
position: fixed;
于 2013-11-10T17:28:30.620 回答
0

我已经通过使用 navbar-fixed-top 将 margin-top 添加到第二个导航栏来修复它。

<div class="navbar navbar-default navbar-remote navbar-fixed-top">
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a>

    </div>
</div>
<div class="navbar navbar-decoration navbar-fixed-top"></div>

CSS

.navbar-decoration {
    margin-top: 50px;
    min-height: 5px;
    max-height: 5px;
/* ... */
}
于 2013-11-10T17:56:39.800 回答