IT-KURS

Thema: Grid einsetzen

Grid Options

In dieser Tabelle können Sie sehen, wie Aspekte des Bootstrap-Grid-Systems auf mehreren Geräten funktionieren.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Max column width	Auto	60px	78px	95px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Rasterklassen gelten für Geräte mit Bildschirmbreiten, die größer oder gleich den Haltepunktgrößen sind, und überschreiben das Raster Klassen für kleinere Geräte. Daher gilt keine .col-md- Die Klasse eines Elements wirkt sich nicht nur auf das Design auf mittleren Geräten aus, sondern auch auf großen Geräten, wenn eine .col-lg- Klasse nicht vorhanden ist.

Hinweis: Die obere und untere Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Stacked-to-horizontal


<div class='row show-grid'>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
    <div class='col-md-1'>.col-md-1</div>
</div>
<div class='row show-grid'>
    <div class='col-md-8'>.col-md-8</div>
    <div class='col-md-4'>.col-md-4</div>
</div>
<div class='row show-grid'>
    <div class='col-md-4'>.col-md-4</div>
    <div class='col-md-4'>.col-md-4</div>
    <div class='col-md-4'>.col-md-4</div>
</div>
<div class='row show-grid'>
    <div class='col-md-6'>.col-md-6</div>
    <div class='col-md-6'>.col-md-6</div>
</div>

1. Ausgabe für Stacked-to-horizontal

Stacked-to-horizontal

.col-md-1

.col-md-8

.col-md-4

.col-md-6

2. Code für Mobile and desktop


<div class='row show-grid'>
    <div class='col-xs-12 col-md-8'>.col-xs-12 .col-md-8</div>
    <div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>
</div>
<div class='row show-grid'>
    <div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>
    <div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>
    <div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>
</div>
<div class='row show-grid'>
    <div class='col-xs-6'>.col-xs-6</div>
    <div class='col-xs-6'>.col-xs-6</div>
</div>

2. Ausgabe für Mobile and desktop

Mobile and desktop

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

3. Code für Mobile, tablet, desktops


<div class='row show-grid'>
    <div class='col-xs-12 col-sm-6 col-md-8'>.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class='col-xs-6 col-md-4'>.col-xs-6 .col-md-4</div>
</div>
<div class='row show-grid'>
    <div class='col-xs-6 col-sm-4'>.col-xs-6 .col-sm-4</div>
    <div class='col-xs-6 col-sm-4'>.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class='clearfix visible-xs'></div>
    <div class='col-xs-6 col-sm-4'>.col-xs-6 .col-sm-4</div>
</div>

3. Ausgabe für Mobile, tablet, desktops

Mobile, tablet, desktops

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

4. Code für Responsive column resets


<div class='row show-grid'>
    <div class='col-xs-6 col-sm-3'>
        .col-xs-6 .col-sm-3
        <br>Resize your viewport or check it out on your phone for an example.
    </div>
    <div class='col-xs-6 col-sm-3'>.col-xs-6 .col-sm-3</div>
    <!-- Add the extra clearfix for only the required viewport -->
    <div class='clearfix visible-xs'></div>
    <div class='col-xs-6 col-sm-3'>.col-xs-6 .col-sm-3</div>
    <div class='col-xs-6 col-sm-3'>.col-xs-6 .col-sm-3</div>
</div>

4. Ausgabe für Responsive column resets

Responsive column resets

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

5. Code für Offsetting columns


<div class='row show-grid'>
    <div class='col-md-4'>.col-md-4</div>
    <div class='col-md-4 col-md-offset-4'>.col-md-4 .col-md-offset-4</div>
</div>
<div class='row show-grid'>
    <div class='col-md-3 col-md-offset-3'>.col-md-3 .col-md-offset-3</div>
    <div class='col-md-3 col-md-offset-3'>.col-md-3 .col-md-offset-3</div>
</div>
<div class='row show-grid'>
    <div class='col-md-6 col-md-offset-3'>.col-md-6 .col-md-offset-3</div>
</div>

5. Ausgabe für Offsetting columns

Offsetting columns

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

6. Code für Nesting columns


<div class='row show-grid'>
    <div class='col-md-9'>
        Level 1: .col-md-9
        <div class='row show-grid'>
            <div class='col-md-6'>
                Level 2: .col-md-6
            </div>
            <div class='col-md-6'>
                Level 2: .col-md-6
            </div>
        </div>
    </div>
</div>

6. Ausgabe für Nesting columns

Nesting columns

Level 1: .col-md-9

Level 2: .col-md-6

7. Code für Column ordering


<div class='row show-grid'>
    <div class='col-md-9 col-md-push-3'>.col-md-9 .col-md-push-3</div>
    <div class='col-md-3 col-md-pull-9'>.col-md-3 .col-md-pull-9</div>
</div>

7. Ausgabe für Column ordering

Column ordering

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9