引导滚动和固定导航栏 - 容器类上的错误？答案

【问题标题】：bootstrap scroll and fixed navbar - buggy on container class?引导滚动和固定导航栏 - 容器类上的错误？
【发布时间】：2016-11-18 10:08:57
【问题描述】：

当您像这样example 向上滚动页面时，我想修复导航栏。

使用.container-fluid 可以，但使用.container 时就不行了。

CSS：

  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

HTML：

<div class="container" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<div class="container">
    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Basic Topnav</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </nav>
</div>


<div class="container" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

结果：

任何想法如何解决这个问题？

【问题讨论】：

您介意提供一个可运行的示例吗？
在你的导航栏上没有容器包装器，你的代码一切都很好，你为什么要用容器包装它？

标签： css twitter-bootstrap affix

【解决方案1】：

这应该解决它：将词缀data-spy添加到保存导航的容器中

HTML：

<div class="container" data-spy="affix" data-offset-top="197">
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav pull-right">
     <li class="active"><a href="#">Basic Topnav</a></li>
     <li><a href="#">Page 1</a></li>
     <li><a href="#">Page 2</a></li>
     <li><a href="#">Page 3</a></li>
   </ul>
 </nav>
</div>

【讨论】：