web-dev-qa-db-fra.com

Bootstrap3: navigation fixe à gauche

Je suis en train de créer un site avec bootstrap 3 et l’idée est d’avoir une colonne à gauche réservée à la navigation et à droite le contenu du site:

http://jsbin.com/iQIKUli/3

La position du nav devrait être fixe et sans marge à gauche et en haut. J'ai essayé avec position: fixed et position: absolute mais le problème est que le contenu du site a priorité sur la barre de navigation.

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

Merci beaucoup!

csstwitter-bootstrapcss-positiontwitter-bootstrap-3navbar
6
FrancescoMussi

Je vous conseillerais de supprimer la variable container extérieure et d'utiliser 'ligne' car il n'y a plus de row-fluid dans BS 3.

http://bootply.com/92472

1
Zim

Avec la version actuelle de Bootstrap (3.3.2), il existe un moyen simple d’obtenir une barre latérale fixe pour la navigation.

Cette solution fonctionne également bien avec la classe de fluide de conteneur réintroduite, ce qui signifie qu’il est facilement possible d’obtenir une présentation plein écran réactif.

Normalement, vous devez utiliser des largeurs et des marges fixes ou la navigation recouvrira le contenu, mais avec l'aide de la colonne d'espace réservé vide, le contenu est toujours placé au bon endroit.

La configuration ci-dessous enveloppe le contenu lorsque vous redimensionnez la fenêtre à moins de 768 pixels et que la navigation est corrigée.

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

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 .

1
Christian.D

Si je comprends bien, vous voulez placer la classe .navigation dans une nouvelle division comme celle-ci:

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

Et remplacez position: absolute; par position: fixed; dans votre classe .navigation

1
hippojamba