Creazione di una barra laterale fissa accanto a una griglia Bootstrap 3 centrata

Question

Vorrei creare una barra laterale fissa esistente all'esterno di griglia di avvio centralizzata. La sfida che affronto quando cerco di farlo è determinare quali stili aggiuntivi applicare/sovrascrivere al mio .container in modo che non si sovrapponga alla mia barra laterale quando lo schermo viene ridimensionato.

Per cominciare sto usando solo la parte della griglia del quadro CSS in modo che il .container, .row e .col-md-12 è il codice estratto dal file bootstrap.css stesso e non è personalizzato. Inoltre, tieni presente che sto utilizzando Bootstrap 3, quindi, per favore, nessun suggerimento per una soluzione a griglia fluida per Bootstrap 2 che viene spesso richiesta nei thread precedenti.

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

Answer 1

As drew_w said, è possibile trovare un good example here.

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