it-swarm.com.de

Säule mit fester Breite mit einer Behälterflüssigkeit

Ich versuche eine Lösung zu finden, um eine Seitenspalte links mit fester Breite und dann rechts einen normalen Bootstrap container-fluid zu haben.

Auch wenn sich die Seitenleiste nicht in der Bootstrap-Struktur befindet, ist sie in Ordnung. Ich meine, es muss nicht mit col-xx-xx class sein.

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

Der Punkt ist auch, dass, wenn ich die Seitenleiste zu keinem angezeigt habe, der Flüssigkeitsbehälter die volle Breite der Seite verwenden muss.

17
somtam

Ein fixed-fluid Layout ist in Bootstrap 3 möglich, aber da Bootstrap 4 nun eine Flexbox ist, ist dieses Layout wesentlich einfacher. Sie müssen lediglich Flexbox aktivieren und ein paar einfache Anpassungen vornehmen, um die Breite Ihrer festen Seitenspalte flex: 0 0 300px; und dann flex: 1; in Ihrer Hauptspalte festzulegen, um die verbleibende Breite auszufüllen.

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

Hier ist ein einfacheres Update für die neueste Version von Bootstrap 4, die standardmäßig flexbox ist:

Bootstrap 4 Alpha 6 oder Betahttp://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: Wie erstellt man ein 2-Spalten-Layout (Fixed - Fluid) mit Twitter Bootstrap?

Update 2018Bootstrap 4.0.0 - Beispiel

20
Zim

Versuchen Sie, Ihren container-fluid in eine div mit margin-left: 200px aufzunehmen (wobei 200px die Breite Ihrer Seitenleiste ist).

Positionieren Sie Ihre Seitenleiste beispielsweise mit position: absolute

0
kartsims