Estoy teniendo problemas con una barra lateral superpuesta cuando uso el afijo para bootstrap 3 y cambio el tamaño de la ventana. ¿Hay alguna forma de agregar alguna clase css para que, en lugar de superponerse a la columna, el menú aparezca en la parte superior?

También la columna se superpone al pie de página. Cualquier ayuda sería muy apreciada. Parece que muchas personas están teniendo este mismo problema.

Aquí está el 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>

Aquí está el CSS:

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

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