La creazione di un fisso laterale a fianco di una centrata Bootstrap 3 griglia

Vorrei creare una barra laterale che esiste fuori mio centrata Griglia di Bootstrap. La sfida che devono affrontare nel tentativo di fare questo è la definizione di ulteriori stili da applicare/sovrascrivere il mio .container in modo che non si sovrappongono sidebar quando lo schermo viene ridimensionato.

Per cominciare io sto usando solo la griglia porzione di framework css in modo che il .container, .row e .col-md-12 è il codice tirato dal bootstrap.css file stesso e non è personalizzato. Anche tenere a mente che sto usando Bootstrap 3, quindi, per favore, non ci sono suggerimenti per una griglia fluida soluzione per Bootstrap 2 che è spesso chiesto nel precedente thread.

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
}
#left-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}

 

One Reply
  1. 111

    Come detto drew_w, è possibile trovare un buon esempio qui.

    HTML

    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="#">Home</a></li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">Next link</a></li>
                <li><a href="#">Last link</a></li>
            </ul>
        </div>
        <div id="page-content-wrapper">
            <div class="page-content">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- content of page -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    CSS

    #wrapper {
      padding-left: 250px;
      transition: all 0.4s ease 0s;
    }
    
    #sidebar-wrapper {
      margin-left: -250px;
      left: 250px;
      width: 250px;
      background: #CCC;
      position: fixed;
      height: 100%;
      overflow-y: auto;
      z-index: 1000;
      transition: all 0.4s ease 0s;
    }
    
    #page-content-wrapper {
      width: 100%;
    }
    
    .sidebar-nav {
      position: absolute;
      top: 0;
      width: 250px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    @media (max-width:767px) {
    
        #wrapper {
          padding-left: 0;
        }
    
        #sidebar-wrapper {
          left: 0;
        }
    
        #wrapper.active {
          position: relative;
          left: 250px;
        }
    
        #wrapper.active #sidebar-wrapper {
          left: 250px;
          width: 250px;
          transition: all 0.4s ease 0s;
        }
    
    }

    JSFIDDLE

    • Come si potrebbero modificare il codice per farlo restare a destra, invece?
    • Vorrei suggerire cercando di modificare tutti i riferimenti di padding-left, margin-left e left, per padding-right, margin-right e right rispettivamente
    • wow, mi hai salvato la giornata! grazie
    • La cosa che mi piace di questo è che non è gonfio con markup e css. Quindi posso facilmente esaminare il codice e capire e poi apportare le modifiche necessarie.
    • Questo mi piace, ma sembra che la mia carica sempre la pagina attivata (nascosta laterale di stato). Ho usato il codice direttamente dall’esempio nel link. Mi chiedo perché sarebbe stato diverso. Ogni pensiero?
    • yep, ridimensionare il vostro schermo. il @media dichiarazione significa che esso mostra/nascondi a seconda della dimensione dello schermo. OP utilizzato col-md-12 nella loro domanda, che è quello che ho usato nel mio esempio. Ho aggiunto un jsfiddle alla domanda per ulteriori info.
    • Questo è grande! L’unico tweak che mi piacerebbe vedere è un full-larghezza barra di navigazione in alto. Poi il laterale dovrebbe cominciare SOTTO la parte superiore della barra di spostamento…
    • Questa non è una buona soluzione, contenitore ha le larghezze in pixel e spostando attraverso il riempimento di sinistra che significa che si ottiene barre di scorrimento quando il ridimensionamento.

Lascia un commento