Bootstrap responsive affixe menu

Question

Je veux avoir un menu apposé comme dans le bootstrap doc qui n'est pas apposé sur les téléphones mobiles, tout comme sur le document bootstrap. J'ai code suivant:

<div class="container"> 
    <div class="row"> 
    <div class="span3 bs-docs-sidebar "> 
     <ul class="nav nav-list bs-docs-sidenav" data-spy="affix"> 
     <li><a href="#a"><i class="icon-home"></i> A</a></li> 
     <li><a href="#b"><i class="icon-chevron-right"></i> B</a></li> 
     <li><a href="#c"><i class="icon-chevron-right"></i> C</a></li> 
     </ul> 
    </div> 

    <div class="span9"> 
     ... 
    </div> 
    </div> 
</div> 

Je l'ai essayé avec et sans data-spy="affix" pour la ul et je l'ai aussi essayé $(function(){ $('.bs-docs-sidenav').affix() }).

Mais le menu est toujours fixe, donc je ne peux pas lire le texte sur les téléphones mobiles.

Answer 1

Je viens de trouver la réponse à ma question sur le fichier bootstraps doc.css qu'ils ont sur leur page. Vous devez ajouter suivante css (peut-être vous devez changer la classe si vous utilisez l'affixe sur une autre classe)

/* Tablet 
------------------------- */ 
@media (max-width: 767px) { 
    .bs-docs-sidenav.affix { 
    position: static; 
    width: auto; 
    top: 0; 
    } 
} 

aussi je viens d'ajouter la classe affix à l'élément bs-docs-sidenav et n'ai pas utilisé JavaScript (ie le data-spy)