Colonna a larghezza fissa con un contenitore fluido in bootstrap

Question

Sto cercando una soluzione per avere una colonna laterale a sinistra con larghezza fissa, e quindi, a destra un normale bootstrap container-fluid.

Anche se la barra laterale non si trova all'interno della struttura di avvio, è ok. Voglio dire che non deve essere con la classe col-xx-xx.

Qualunque cosa faccia il problema principale è che non riesco a far stare il contenitore del liquido vicino alla barra laterale.

Il punto è anche che se non visualizzo nessuna barra laterale, il contenitore del fluido deve utilizzare l'intera larghezza della pagina.

Grazie in anticipo per il supporto.

Answer 1

Provare a includere container-fluid in un div con margin-left: 200px (dove 200px è la larghezza della barra laterale).

Poi posizionare la barra laterale con position: absolute per esempio

Answer 2

Un layout -fluido fisso è possible in Bootstrap 3, ma ora che Bootstrap 4 ha flexbox è molto più facile. Hai solo bisogno di abilitare FlexBox, e fare alcune semplici regolazioni per impostare la larghezza della colonna laterale fisso flex: 0 0 300px;, e quindi flex: 1; sulla colonna principale per riempire la larghezza del restante ...

Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw

Ecco un aggiornamento semplice per l'ultima Bootstrap 4 che è FlexBox per impostazione predefinita:

Bootstrap 4 Alpha 6 o Beta http://codeply.com/go/V9UQrvLWwz

@media (min-width: 576px) { 
    .sidebar { 
      max-width: 280px; 
    } 
} 

<div class="container-fluid"> 
    <div class="row flex-nowrap"> 
     <div class="col-md-4 col-12 sidebar"> 

     </div> 
     <div class="col-md col-12 main"> 
      <h2>Main (fluid width...)</h2> 
     </div> 
    </div> 
</div> 

Vedi anche: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Aggiornamento 2018 Bootstrap 4.0.0 example