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

Demo: 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-*.