Responsive Design bei Bootstrap 3 deaktivieren

Ein kleine Anleitung um das Responsive Design bei Twitters Bootstrap 3 zu deaktivieren.

Falls man das Responsive Design von Twitter aus irgendeinem Grund nicht gebrauchen kann, muss man eigentlich nur 3 einfache Schritte befolgen:

Schritt 1:

Im HTML Head muss die Zeile

<html>
    <head>
        ...
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        ...
    </head>
    ...
</html>

gelöscht oder auskommentiert werden.

Schritt 2:

In eurer eigenen CSS Datei müsst ihr die maximale Breite und eventuell eine feste Breite für die Klasse .container setzen:

.container {
    max-width:  970px !important;
    width: 970px !important;
}

Schritt 3:

Wenn ihr das Grid-Layout genutzt habt (col-XX-XX) müsst ihr in euren Templates alle col-lg-XX, col-md-Xx usw. auf col-xs-XX setzen.

<!-- Alt -->
<div class="col-lg-12 col-md-12">
    ...
</div>
 
<!-- Neu -->
<div class="col-xs-12">
    ...
</div>

Alle Infos gibts auch nochmal direkt bei getbootstrap.com. Bei GitHub gibt es eine komplette Nonresponsive Variante von Bootstrap.

Kommentar verfassen