增加填充當且僅當部分位於頁面頂部

我使用引導程序創建一個頁面，其中包含一個jumbotron頂部，一個sidenav（添加到頂部）以及一些內容在點擊時上升到頂部sidenav。從功能上來說，它工作正常，但定位主要內容需要幫助。增加填充當且僅當部分位於頁面頂部

如果可能，我的目標是讓sidenav中點擊的內容部分不出現在頁面的頂部，而是在瀏覽器窗口頂部以下約70px。我可以輕鬆地將70px添加到每個部分的頂部，但是頁面最終會在部分之間留下太多空白。代碼結構如下...

<body > 
<!-- navigation header - fixed to top and transparent 
================================================== --> 
    <!-- <header><ul><li><a></a><li><ul></header>--> 


<!-- jumbotron 
================================================== --> 

<div class="container"> 
    <div class="row-fluid" align="center"> 
     <div class="jumbotron span12"> 
      <!-- jumbotron content height: 800px --> 
     </div> 
    </div> 



<!-- side nav 
================================================== --> 
    <div class="row"> 
     <div class="span3" id="side-nav" data-spy="affix" data-offset-top="760"> 
      <ul class="nav nav-list"> 
       <li><a href="#section_1_name">section 1</a></li> 
       <li><a href="#section_2_name">section 2</a></li> 
       <li><a> <!-- links to additional sections --> </a></li> 
      </ul> 
     </div> 


     <div class="span9 main-content"> 

     <!-- Sample section 1 
     ================================================== --> 
      <section id="section_1_name"> 
       <div class="page-header"> 
       <h1>header</h1> 
       </div> 

       <h3>Why you should do this</h3> 
       <p>It's so amazing you'll want to do it. It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p> 

       <h3>Specfic Instructions</h3> 
       <p>lorem ispum ... </p> 
      </section> 

     <!-- Sample section 2 
     ================================================== --> 
      <section id="section_2_name"> 
       <div class="page-header"> 
       <h1>header</h1> 
       </div> 

       <h3>Why you should do this</h3> 
       <p>It's so amazing you'll want to do it. It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p> 

       <h3>Specfic Instructions</h3> 
       <p>lorem ispum ... </p> 
      </section> 

     <!-- Additional sections 
     ================================================== --> 

     </div> <!-- end of row --> 

    </div> <!-- end span9 ---> 
</body>

任何想法如何讓每個第十節當sidenav點擊出現低於70像素的頂部？

來源

2013-07-27 globalSchmidt

您使用的是什麼版本的Bootstrap？在版本2.3 jumbotrons被稱爲英雄的。但是在Bootstrap 3中不存在導航列表（您的左導航部分）。 –

我也有這個相同的問題，我希望從上面加載約70px 80px的部分，並且不希望部分之間有額外的空間，如果你找到了解決方案，你可以發佈它。

感謝

來源

2013-08-12 03:27:25 user2603537

添加padding-top: 70px;到您的div容器，如果你想要的一切下推，包括你的身邊，資產淨值。

如果您不想讓side-nav隨頁面滾動一起移動，請添加「詞綴」類。 <ul class="nav nav-list affix">

在您的示例中，您還需要將#添加到您的href鏈接。 <li><a href="#section_1_name">section 1</a></li>

Bootstrap網站建立的方式（至少2.3）沒有使用他們發佈最好的代碼，所以使用頁面源代碼並不總是成功。

另外，nav的工作方式類似於頁面中的錨點，它只是移動到該部分，所以當內容更多時它看起來真的很好。如果沒有足夠的內容，頁面將不會「跳轉」到該位置。另外它看起來在有小部分和最後部分時表現的很奇怪。即使引導站點這樣做。

來源

2013-11-27 18:29:34

感謝Matt H.這是一個老問題，與Bootstrap 2.3有關。確實，BS2.3有英雄單位，但如果你在BS2.3文檔中查看源代碼，你會發現最上面的部分是使用'jumbotron'類。 – globalSchmidt

進一步的評論（以前超時）：由於我現在已經移到BS3，並使用不同的設計，這個問題已經被我解決了。除非Matt H或user2603537在接下來的幾天內有異議，否則我會刪除它。 – globalSchmidt

增加填充當且僅當部分位於頁面頂部

回答

相關問題