Question

我想做这样的事情：

http://twitter.github.io/bootstrap/components.html

哪里有导航栏，“jumbotron”，导航列表位于左侧。它位于jumbotron下方，但是当你向下滚动它时它会滚动直到它击中导航栏，然后它会向下滚动。

到目前为止，我已经拥有了它，所以它向下滚动页面，但顶部的边距是navbar + jumbotron，所以当我向下滚动时，会有大量的空白区域。我似乎无法在源代码中找到答案。

我通过修复左侧导航列表的位置并将内容浮动在右侧浮动上来完成此操作：左侧有左边距。

感谢您的帮助。

<!-- start page wrap -->
<div id="wrap">

<!-- START NAV -->

<div class ="navbar navbar-inverse navbar-fixed-top">
    <div class="navinner">
    <div class="container">
        <ul class="nav pull-right helfont">
          <li><!-- TOP NAV BAR LIST HERE -->
        </ul>
    </div> 
  </div> 
</div> 



<!-- END NAV -->  


<div id="faq" class="container">

<div class="title">
    <h1> Frequently Asked Questions </h1>
</div>  

<div class="row">
     <div class="span3 offset1 faq-list">
      <ul class="nav nav-list" style="padding-left: 20px;">
      <li> <!-- NAV LIST HERE THAT I WANT ON LEFT -->
      </ul>
   </div>
 </div>

<div class="span7 offset3 faq-content">
  <!-- CONTENT ON RIGHT HERE -->
</div>

的CSS：

 #faq {
 margin-top: 30px;
}

#faq .row {
margin-top: 40px;
 }

.faq-list {
position: fixed;
}

.faq-content {
 margin-left: 320px !important;
 float:left;
}

Answer 1

在您引用的页面上，一旦jumbotron滚动离开，左导航冻结的行为似乎是使用文件“bootstrap-affix.js”中包含的javascript实现的。如果您正在使用引导框架，我相信您可以通过将“affix”类应用于相关元素来获得该行为：

 <ul class="nav nav-list affix" style="padding-left: 20px;">

您可能还应该删除您添加的margin-top和position: fixed，如果您使用bootstrap内置的affix行为，则无需实现此效果。

想要修复左侧导航列表，使其保持在导航栏下方

1 个答案: