Risolto il problema con la navigazione nella barra laterale in fluid twitter bootstrap 2.0


Risposte:


168

Nota: esiste un plug-in jQuery bootstrap che fa questo e molto altro che è stato introdotto in alcune versioni dopo che questa risposta è stata scritta (quasi due anni fa) chiamato Affix . Questa risposta si applica solo se stai usando Bootstrap 2.0.4 o inferiore.


Sì, crea semplicemente una nuova classe fissa per la barra laterale e aggiungi una classe offset al div del contenuto per compensare il margine sinistro, in questo modo:

CSS

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

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

Demo: http://jsfiddle.net/U8HGz/1/show/ Modifica qui: http://jsfiddle.net/U8HGz/1/

Aggiornare

Risolto il problema con la mia demo per supportare il foglio di bootstrap reattivo, ora scorre con la funzione reattiva del bootstrap.

Nota: questa demo scorre con la barra di navigazione fissa superiore, quindi entrambi gli elementi diventano position:staticdopo il ridimensionamento dello schermo, ho posizionato un'altra demo sotto che mantiene la barra laterale fissa fino a quando lo schermo non scende per la visualizzazione 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-->

Demo , modifica qui .

nota minore: c'è una differenza di circa 10px / 1% sulla larghezza della barra laterale fissa, è dovuto al fatto che poiché non eredita la larghezza dal div del contenitore span3 perché è fissa, ho dovuto inventare un larghezza. È abbastanza vicino.

Ed ecco un altro metodo se vuoi mantenere la barra laterale fissa fino a quando la griglia non si abbassa per la visualizzazione su schermo piccolo / 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;
    }
}

Demo , modifica qui .


Per me su Chrome e Firefox, quel violino ha sempre una barra di scorrimento orizzontale (Chrome) al di sotto di una larghezza di ~ 1.016 pixel. (Più facile da vedere qui: jsfiddle.net/U8HGz/130/show che è solo / 1 ma mostra la larghezza e l'altezza della finestra sotto "Hello World; non so cosa siano / 2 - / 129.)
TJ Crowder

1
@TJCrowder che è dovuto alla margin-left:290pxdichiarazione sulla .span-fixed-sidebarclasse fatta per far posto alla sidebar, se non ci fosse, il contenuto si sovrapporrebbe alla sidebar su schermi più piccoli. È possibile eliminare la barra di scorrimento orizzontale pur nascondendosi esplicitamente sul bodytag, in questo modo: body { overflow-x: hidden; }.
Andres Ilich

Grazie. Potrebbe funzionare con una media query o qualcosa del genere (quindi è presente su finestre molto strette); ma a quel punto probabilmente si vuole comunque spostare la barra laterale.
TJ Crowder

1
@mauris ha corretto la mia demo ti supporta la funzione reattiva del bootstrap.
Andres Ilich

1
@miguelcobain qui è una versione fissa , non completamente testata ma ha funzionato bene nel mio ambiente di test. Un'altra soluzione potrebbe essere quella di utilizzare il plugin affix bootstrap, che porta il supporto nativo per le sezioni fisse sul bootstrap .... questa soluzione è stata scritta in un momento in cui non ne avevamo.
Andres Ilich

46

L'ultimo Boostrap (2.1.0) ha una nuova funzione di "affisso" JS specifica per questo tipo di applicazione, FYI.


@AlexanderRechsteiner Non proprio. L'OP menziona specificamente Bootstrap 2.0.
Kyle

27

questo rovinerà il responsive Webdesign. È meglio racchiudere la barra laterale fissa in una media query.

CSS

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

HTML

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

Ora la barra laterale è solo fissa, se il viewpot è più grande di 768px.



0

Ho iniziato con le risposte di Andres e ho finito per ottenere una barra laterale appiccicosa come questa:

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);

Suppongo di aver bisogno anche di JS per aggiornare la variabile "sidebarwidth" quando il viewport viene ridimensionato.


0

Molto facile da ottenere correzione nav o tutto il tag che desideri. Tutto ciò di cui hai bisogno è scrivere il tuo fix tag in questo modo e metterlo nella sezione del tuo corpo

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

0

Con l'attuale versione Bootstrap (3.3.2) c'è un bel modo per ottenere una barra laterale fissa per la navigazione.

Questa soluzione funziona bene anche con la classe container-fluid reintrodotta, il che significa che è facilmente possibile avere un layout a schermo intero reattivo.

Normalmente dovresti usare larghezze e margini fissi o la navigazione si sovrapporrebbe al contenuto, ma con l'aiuto della colonna segnaposto vuota il contenuto è sempre posizionato nel posto giusto.

La configurazione seguente avvolge il contenuto quando ridimensionate la finestra a meno di 768px e rilascia la navigazione fissa.

Vedi http://www.bootply.com/ePvnTy1VII per un esempio funzionante.

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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.