web-dev-qa-db-fra.com

Correction de la barre latérale de navigation dans Twitter fluide bootstrap 2.0

Est-il possible de faire en sorte que la navigation dans les barres latérales reste toujours fixe sur le défilement dans une disposition fluide?

csstwitter-bootstrapcss-positionfluid-layout
92
sl_bug

Remarque: Il existe un plug-in bootstrap jQuery qui fait cela et bien plus encore qui a été introduit quelques versions après que cette réponse a été écrite (presque il y a 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 offset à votre div de contenu pour compenser la marge de gauche, comme suit:

[~ # ~] 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 bootstrap sensible, maintenant, il coule avec la fonctionnalité responsive du bootstrap.

Remarque: Cette démo se déroule avec la barre de navigation fixe supérieure, de sorte que les deux éléments deviennent position:static Lors du redimensionnement de l'écran. J'ai placé une autre démo ci-dessous qui conserve la barre latérale fixe jusqu'à ce que l'écran disparaisse 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 , éditez ici .

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

Et voici une autre méthode si vous souhaitez conserver la barre latérale fixe jusqu'à ce que la grille disparaisse pour un affichage sur un petit écran/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 , éditez ici .

168
Andres Ilich

Le dernier Boostrap (2.1.0) a une nouvelle fonctionnalité JS "affixe" spécialement pour ce type d’application, FYI.

46
Joyrex

cela va bousiller le Webdesign responsive. Mieux vaut encapsuler 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>

Maintenant, la barre latérale n'est corrigée que si le point de vue est plus grand que 768px.

27
HaNdTriX

Ce n'est pas possible sans JavaScript. Je trouve affix.js trop complexe, je préfère donc utiliser:

stickyfloat

1
Zuhaib Ali

Avec la version actuelle Bootstrap version (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 positionné au bon endroit.

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

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

[~ # ~] 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>
0
Christian.D

J'ai commencé avec les réponses d'Andres et j'ai fini par avoir 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 JS doit également mettre à jour la variable 'sidebarwidth' lorsque la fenêtre d'affichage est redimensionnée.

0
mdashx

Très facile à obtenir fix nav ou tout tag que vous voulez. Tout ce dont vous avez besoin est d'écrire votre correctif comme ceci et de le mettre dans votre section body

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