html內容中的片段位於導航欄的後面，如何防止這種情況發生？

Question

我正在使用引導程序3.我正在嘗試在html中執行片段標識符。我的問題是，當我點擊一個鏈接（來自Image：link1或link2）時，內容會上升並放在導航欄後面。我想在導航欄下方顯示我的內容。我怎樣才能做到這一點？如果有人對此有任何想法，請與我分享。 Bootply鏈接：http://www.bootply.com/FlMIBamLwj

點擊一個鏈接之前：

點擊一個鏈接後：

我的代碼在這裏：

CSS: 
@media (min-width: 979px) { 
body { 
    padding-top: 60px; 
    } 
} 

    Html: 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<form class="navbar-form navbar-left" role="search"> 
    <div class="form-group"> 
    <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 
</nav> 

    <div class="container"> 
     <div class="row clearfix"> 
      <div class="col-md-4 column"> 
      <div class="list-group"> 
       <a href="#l1" class="list-group-item list-group-item-success">List1</a> 
       <a href="#l2" class="list-group-item list-group-item-info">List2</a> 
       <a href="#l3" class="list-group-item list-group-item-warning">List3</a>      
      </div> 
      </div> 

      <div class="col-md-8 column"> 
      <div class="panel panel-default" id="l1"> 
       <div class="panel-heading"> 
       <h3 class="panel-title"> 
        List 1 title 
       </h3> 
       </div> 
       <div class="panel-body"> 
       list1 content 
       </div> 
       <div class="panel-footer"> 
       list1 footer 
       </div> 
      </div> 

      <div class="panel panel-default" id="l2"> 
       <div class="panel-heading"> 
       <h3 class="panel-title"> 
        List 2 
       </h3> 
       </div> 
       <div class="panel-body"> 
       List 2 content 
       </div> 
       <div class="panel-footer"> 
       List 2 footer 
       </div> 
      </div> 

      <div class="panel panel-default" id="l3"> 
       <div class="panel-heading"> 
       <h3 class="panel-title"> 
        list3 title 
       </h3> 
       </div> 
       <div class="panel-body"> 
       list3 content 
       </div> 
       <div class="panel-footer"> 
       list3 footer 
       </div> 
      </div> 

      </div> 
     </div> 
     </div> 

Bootply鏈接：一個錨標記的http://www.bootply.com/FlMIBamLwj#

Answer 1

這是散列片段標識符的固有問題。它將頁面移動到錨點，忽略邊距和填充。在使用固定標題時，這更令人討厭。

你可以使用這個黑客，我一直在使用::before僞元素。

您更新bootply：http://www.bootply.com/KViKzJkfX8

從面板刪除id。請在每個此類面板前用id s插入錨點，以便它們充當您的片段標識符。就像這樣：

而不是：

<div class="panel panel-default" id="l1"> 
... 
<div class="panel panel-default" id="l2"> 
... 

做到這一點：

<a id="l1"></a> 
<div class="panel panel-default"> 
... 
<a id="l2"></a> 
<div class="panel panel-default"> 
... 

的添加::before僞元素到每臺錨：

#l1::before, #l2::before, #l3::before { 
    content: ""; 
    display: block; 
    height: 60px; 
    margin: -60px 0 0 0; 
} 

這將在錨點之前創建一個僞元素，其高度等於您的填充（用於抵消固定標題的填充）body。爲了否定這個僞元素佔據的空間，給它一個相同高度的負頂邊。這會使它顯然消失。

現在，當您點擊菜單項時，頁面將會移到相應的錨點，但由於之前的::before僞元素的高度，頁面將停在那裏。

希望這會有所幫助。

---

爲了貼上您的左菜單，您可以使用引導程序affix。

所有您需要做的是affix類添加到您的list-group：

<div class="col-md-4 column"> 
    <div class="list-group affix" > <!-- Add affix class here --> 
     <a href="#l1" class="list-group-item list-group-item-success">List1</a> 
     <a href="#l2" class="list-group-item list-group-item-info">List2</a> 
     <a href="#l3" class="list-group-item list-group-item-warning">List3</a>      
    </div> 
</div> 

，併爲其提供一個寬度相當於col-md-4（你所賜給列），即約30％。這是因爲affix會將其位置轉換爲fixed並因此將其從流中取出，因此寬度將相對於內容自動。

這種單一的風格添加到您的CSS：

.affix { width: 30%; } 

就是這樣。只是兩個變化。將類affix添加到菜單包裝中。爲.affix添加樣式以固定寬度。

。

Answer 2

那默認功能。如果您在同一頁面上瀏覽，瀏覽器會將您帶到該標籤。

如果您只想移動內容部分，則必須將其內容和高度與頁面的其餘部分分開。這可以通過應用高度和溢出財產不能做到：

#scrollableDiv { 
    height:100px; 
    overflow:auto; 
} 

和ID添加到div你想滾動

<div id="scrollableDiv" class="col-md-8 column"> 
    <div class="panel panel-default" id="l1"> 
    ... 

工作版本可以在這裏看到：http://www.bootply.com/JaIlKXHycj