Question

我正在尝试在页面顶部发出提醒，其中有一个表单供我的访问者输入他们的电话号码。它只是一个“alert alert-info”div，其中包含表单。所以这很有效，因为我把它放在身体标签的顶部。然后是导航，现在是一个“navbar navbar-default navbar-static-top”div。当我尝试将其更改为固定顶部（固定在警报下方）时，它就会出现在警报之上（可能存在z-index问题，我不知道）。有没有人知道如何将导航固定在顶部但低于警报（在最顶部应该是静态的）？

提前多多谢谢！

Answer 1

Per Bootstrap的documentation：“固定的导航栏将覆盖您的其他内容，除非您在身体顶部添加填充。”

Answer 2

感谢您的回答。使用bootstrap词缀找到了我自己的最终答案（来自另一个问题）。我把一个id放在了一个名为＆＃34; alert＆＃34;并且导航的id称为＆＃34; topnavbar＆＃34;。然后我添加了css：

#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}

和javascript：

$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}   
});

来自：Putting content/banner above the "Fixed Top Navbar"

这会将导航设置在警报和jumbotron之间，导航后导航会变为粘滞状态。

Answer 3

如果我得到你想做的事，为什么不尝试这样的事情。只需添加另一个div容器 ..但在导航栏的顶部。只需在此容器中发出警报即可。这是 Fiddle 。

<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container col-lg-12 bg-primary"><br><br></div>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

引导程序固定在顶部但在警报顶部

3 个答案: