Twitter-bootstrap 3當窗口調整大小和頁腳時，添加了側邊欄重疊的內容

Question

我在使用關於引導3並重新調整窗口大小的詞綴時存在重疊邊欄的問題。有沒有辦法添加一些CSS類，而不是重疊列，菜單附加到頂部？

此外，該列重疊頁腳。任何幫助將不勝感激。似乎很多人都有這個問題。

下面是HTML：

<div class="container"> 
<div class="row"> 
    <div class="col-md-4 column"> 
       <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130"> 
       <li><a href="#software"><b>Software</b></a></li> 
        <ul> 
         <li><a href="#features">Features</a></li> 
         <li><a href="#benefits">Benefits</a></li> 
         <li><a href="#costs">Costs</a></li> 
        </ul> 

      </ul> 

    </div> 
    <div class="col-md-8 column"> 
      <p>blah, blah, blah</p> 
      <hr> 
      <a class="anchor3" id="top" name="software"></a> 
      <h2 style="font-weight:bold;">Software</h2> 
<p> 
blah, blah, blah...</p><br><br> 

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

這裏是CSS：

#sidebar.affix-top { 
position: static; 
} 

#sidebar.affix { 
position: fixed; 
top: 100px; 
} 

Answer 1

演示：http://bootply.com/104634

您應該只適用affix當屏幕寬度較大的是992個像素（Bootstrap col-md-*開始垂直堆疊的斷點） 。

.affix-top,.affix{ 
    position: static; 
} 

@media (min-width: 992px) { 

    #sidebar.affix-top { 
    position: static; 
    } 

    #sidebar.affix { 
    position: fixed; 
    top: 100px; 
    } 
} 

另外，如果你想使用affix在較小的寬度，你可以改變你列col-sm-*或col-xs-*。