要修復左側導航欄列表，使其保持低於導航欄

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

哪裏有導航欄，一個「超大屏幕」，而導航列表位於左側。它位於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; 
}

來源

2013-07-08 SirBdon

你能告訴我們你到目前爲止得到的代碼嗎？ –

什麼是可以粘貼我自己的html代碼並共享呈現網站的網站？ – SirBdon

好的，編輯並添加了代碼 – SirBdon

在你所引用的頁面，在左側導航一次到位的超大屏幕滾動離開凍結的行爲似乎使用該文件中包含的JavaScript「bootstrap-實現affix.js」。如果您使用的是引導框架，我相信你可以簡單地通過問題採用「粘貼」類的元素得到該行爲：

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

你或許應該也刪除margin-top和您添加position: fixed，這如果您使用建立在affix行爲中的引導程序，則不應該有必要實現該效果。

來源

2013-07-08 14:29:20

要修復左側導航欄列表，使其保持低於導航欄

回答

相關問題