Bootstrap3: fixe de la valeur liquidative sur la gauche

Je suis en train d'ouvrir un site avec bootstrap 3 et l'idée est d'avoir une colonne sur la gauche réservés pour la navigation et sur la droite le contenu du site:

http://jsbin.com/iQIKUli/3

La position de la valeur liquidative doit être fixe et sans marge sur la gauche et sur le dessus.
J'ai tryied avec position:fixed et position:absolute, mais le problème est que le contenu du site de remplacer la barre de navigation.

Comment puis-je faire correctement un fixe barre de navigation sur la gauche?
Comment puis-je éviter que le contenu du site de remplacer la barre de navigation?

Merci beaucoup!

InformationsquelleAutor FrancescoMussi | 2013-11-07
  1. 1

    Je vous suggère de retirer l'extérieur container, et d'utiliser la "rangée", car il n'est plus row-fluid BS 3.

    http://bootply.com/92472

    • Merci j'ai maintenant résolu. Je peux vous faire une petite question: Pourquoi définir le min-width dans l'emballage et pas de navigation dans la classe?
    • Bootstap col-xs-*' est complètement fluide donc il va continuer de se contracter et finit par entrer en collision avec votre fixe nav... donc, vous devez faire le wrapper fixe pour empêcher que cela se produise.
    • Je comprends maintenant, merci! Si vous avez le temps là, j'ai fait une autre question similaire, à propos de la réactivité de la zone de contenu: stackoverflow.com/questions/19840093/...
    InformationsquelleAutor Zim
  2. 1

    Si je comprends droite, vous voulez placer le .navigation classe dans une nouvelle div comme ceci: 

    <div class="col-xs-4 col-md-2">
     <div class="navigation">
          <h1>Navigation</h1>
     </div>
</div> <!-- /col-md-2 navigation -->

    Et changement position: absolute; à position: fixed; dans votre .navigation classe

    InformationsquelleAutor hippojamba
  3. 1

    Avec le courant de démarrage de la version (3.3.2) il y a une belle façon de parvenir à une barre latérale fixe pour la navigation.

    Cette solution fonctionne aussi bien avec la ré-introduction du conteneur de liquide de classe, le sens qu'il est facilement possible d'avoir un réactif disposition de l'écran.

    Normalement, vous auriez besoin d'utiliser des largeurs fixes et les marges ou la navigation sur le chevauchement du contenu, mais avec l'aide de l'espace réservé vide de la colonne, le contenu est toujours positionné à la bonne place.

    Ci-dessous le programme d'installation encapsule le contenu lorsque vous redimensionnez la fenêtre à moins de 768px et libère le fixe de navigation.

    Voir http://www.bootply.com/ePvnTy1VII pour un exemple.

    CSS

    @media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

    HTML

    <div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>

    Voir ma réponse dans https://stackoverflow.com/a/28238515/3891027.

    InformationsquelleAutor Christian.D