Feste Breite Spalte mit einem Behälter-Flüssigkeit im Bootstrap

Question

Ich versuche, eine Lösung zu finden, um eine Seitensäule auf der linken Seite mit fester Breite zu haben, und dann auf der rechten Seite eine normale Bootstrap-Behälter-Flüssigkeit.

Auch wenn die Sidebar nicht in der Bootstrap-Struktur ist, ist es in Ordnung. Ich meine, es muss nicht mit der Klasse col-xx-xx sein.

Was auch immer ich tue, das Hauptproblem ist, dass ich es nicht schaffen kann, dass der Flüssigkeitsbehälter neben der Seitenleiste bleibt.

Der Punkt ist auch, dass, wenn ich keine Seitenleiste anzeigen, der Flüssigkeitsbehälter die volle Breite der Seite verwenden muss.

Vielen Dank für die Unterstützung.

Answer 1

Versuchen Sie Ihre container-fluid in einer div mit margin-left: 200px (wo 200px ist die Breite Ihrer Sidebar).

positionieren Dann Sidebar mit position: absolute zum Beispiel

Answer 2

A Fest Flüssigkeit Layout ist possible in Bootstrap 3, aber jetzt, dass Bootstrap 4 hat Flexbox ist es viel einfacher. Sie müssen nur Flexbox ermöglichen, und ein paar einfache Anpassungen auf die Breite des feststehenden Seitenspalte flex: 0 0 300px;, zu setzen und dann flex: 1; auf Ihrer Hauptspalte verbleibende Breite zu füllen ...

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

Hier ist ein einfacher Update für die neueste Bootstrap 4, die Flexbox standardmäßig:

Bootstrap 4 Alpha 6 oder 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> 

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

-Update 2018 Bootstrap 4.0.0 example