Flexbox Grid

Responsive ( Reaktionsschnell )

Responsive Modifikatoren ermöglichen die Angabe unterschiedlicher Spaltengrößen, Offsets, Ausrichtung und Verteilung in den Darstellungsfeldbreiten xs, sm, md und lg.

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Fluid ( Flüssigkeit )

Prozentbasierte Breiten ermöglichen das Ändern der Größe von Spalten und Zeilen.

.col-xs-6 {
  flex-basis: 50%;
}

Simple Syntax

Alles, woran Sie sich erinnern müssen, ist Zeile, Spalte, Inhalt..

<div class="row">
    <div class="col-xs-12">
        <div class="box">12</div>
    </div>
</div>

Offsets

Versetzen Sie eine Spalte

<div class="row">
    <div class="col-xs-offset-3 col-xs-9">
        <div class="box">offset</div>
    </div>
</div>

Automatische Breite

Fügen Sie einer Zeile eine beliebige Anzahl von Spalten mit automatischer Größenänderung hinzu. Lassen Sie das Gitter es herausfinden.

<div class="row">
    <div class="col-xs">
        <div class="box">auto</div>
    </div>
</div>

Geschachtelte Gitter

Raster innerhalb der Raster innerhalb der Raster.

<div class="row">
    <div class="col-xs">
        <div class="box">
            <div class="row">
                <div class="col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Ausrichtung

Fügen Sie Klassen hinzu, um Elemente am Anfang oder Ende einer Zeile sowie am oberen, unteren oder mittleren Rand einer Spalte auszurichten.

.start-

<div class="row start-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.center-

<div class="row center-xs">
    <div class="col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.end-

<div class="row end-xs">
    <div class="col-xs-6">
        <div class="box">
            end
        </div>
    </div>
</div>

Hier ist ein Beispiel für die Verwendung der Modifikatoren in Verbindung mit der Erzielung einer unterschiedlichen Ausrichtung bei unterschiedlichen Ansichtsfenstergrößen..

<div class="row center-xs end-sm start-lg">
    <div class="col-xs-6">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.top-

<div class="row top-xs">
    <div class="col-xs-6">
        <div class="box">
            top
        </div>
    </div>
</div>

.middle-

<div class="row middle-xs">
    <div class="col-xs-6">
        <div class="box">
            center
        </div>
    </div>
</div>

.bottom-

<div class="row bottom-xs">
    <div class="col-xs-6">
        <div class="box">
            bottom
        </div>
    </div>
</div>

Verteilung

Fügen Sie Klassen hinzu, um den Inhalt einer Zeile oder Spalte zu verteilen.

.around-

<div class="row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

.between-

<div class="row between-xs">
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            between
        </div>
    </div>
</div>

Neuordnung

Fügen Sie Klassen hinzu, um Spalten neu anzuordnen.

.first-

<div class="row">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs">
        <div class="box">
            3
        </div>
    </div>
</div>

.last-

<div class="row">
    <div class="col-xs-2 last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Umkehren

.reverse

<div class="row reverse">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>