Correction de la navigation dans la barre latérale dans Fluide Twitter Bootstrap 2.0


Réponses:


168

Remarque: il existe un plugin bootstrap jQuery qui fait cela et bien plus encore qui a été introduit quelques versions après que cette réponse ait été écrite (il y a presque deux ans) appelé Affix . Cette réponse ne s'applique que si vous utilisez Bootstrap 2.0.4 ou une version antérieure.


Oui, créez simplement une nouvelle classe fixe pour votre barre latérale et ajoutez une classe de décalage à votre div de contenu pour compenser la marge gauche, comme ceci:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Démo: http://jsfiddle.net/U8HGz/1/show/ Modifiez ici: http://jsfiddle.net/U8HGz/1/

Mettre à jour

Correction de ma démo pour prendre en charge la feuille d'amorçage réactive, maintenant elle coule avec la fonction réactive du bootstrap.

Remarque: Cette démo suit la barre de navigation fixe supérieure, de sorte que les deux éléments deviennent position:staticlors du redimensionnement de l'écran, j'ai placé une autre démo ci-dessous qui maintient la barre latérale fixe jusqu'à ce que l'écran tombe pour la vue mobile.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Démo , modifiez ici .

note mineure: il y a une différence d'environ 10px / 1% sur la largeur de la barre latérale fixe, cela est dû au fait que comme il n'hérite pas de la largeur du div conteneur span3 car il est fixe, j'ai dû trouver un largeur. C'est assez proche.

Et voici une autre méthode si vous souhaitez garder la barre latérale fixe jusqu'à ce que la grille tombe pour un petit écran / vue mobile.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Démo , modifiez ici .


Pour moi, sur Chrome et Firefox, ce violon a toujours une barre de défilement horizontale (Chrome) inférieure à une largeur d'environ 1016 pixels. (Plus facile à voir ici: jsfiddle.net/U8HGz/130/show qui est juste / 1 mais affiche la largeur et la hauteur de la fenêtre sous "Hello World; je ne sais pas ce que sont / 2 - / 129.)
TJ Crowder

1
@TJCrowder qui est due à la margin-left:290pxdéclaration sur la .span-fixed-sidebarclasse faite pour faire place à la barre latérale, si elle n'était pas là, le contenu chevaucherait la barre latérale sur des écrans plus petits. Vous pouvez éliminer la barre de défilement horizontale mais en se cachant explicitement sur l' bodyétiquette, comme suit: body { overflow-x: hidden; }.
Andres Ilich

Merci. Cela pourrait fonctionner avec une requête multimédia ou quelque chose du genre (donc c'est là sur des fenêtres vraiment étroites); mais à ce stade, on veut probablement déplacer la barre latérale de toute façon.
TJ Crowder

1
@mauris a corrigé ma démo pour prendre en charge la fonction responsive du bootstrap.
Andres Ilich

1
@miguelcobain est une version fixe , pas entièrement testée mais fonctionnant très bien dans mon environnement de test. Une autre solution serait d'utiliser le plugin affix bootstrap, qui apporte un support natif pour les sections fixes sur le bootstrap .... cette solution a été écrite à un moment où nous n'en avions pas.
Andres Ilich

46

Le dernier Boostrap (2.1.0) a une nouvelle fonction "affixe" JS spécifiquement pour ce type d'application, FYI.


@AlexanderRechsteiner Pas vraiment. L'OP mentionne spécifiquement Bootstrap 2.0.
Kyle

27

cela va bousiller le Webdesign réactif. Mieux vaut envelopper la barre latérale fixe dans une requête multimédia.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Désormais, la barre latérale n'est fixe que si le champ de vision est plus grand que 768px.


1

Ce n'est pas possible sans javascript. Je trouve affix.js trop complexe, donc j'utilise plutôt:

collant


0

J'ai commencé avec les réponses d'Andres et j'ai fini par obtenir une barre latérale collante comme celle-ci:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Je suppose que j'ai également besoin de JS pour mettre à jour la variable 'sidebarwidth' lorsque la fenêtre est redimensionnée.


0

Très facile d'obtenir la navigation fixe ou tout ce que vous voulez. Tout ce dont vous avez besoin est d'écrire votre balise de correction comme celle-ci et de la mettre dans votre section corps

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

0

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

Cette solution fonctionne également bien avec la classe de fluide conteneur réintroduite, ce qui signifie qu'il est facilement possible d'avoir une mise en page plein écran réactive.

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

La configuration ci-dessous enveloppe le contenu lorsque vous redimensionnez la fenêtre à moins de 768 pixels et libère la navigation fixe.

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

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.