Codeschnippsel

Feste Seitenbreite mit Bootstrap

Bootstrap ist ein wunderbares CSS und Javascript Framework.
Was aber wenn die Seite eine feste Breite haben und auf allen Endgeräten vom großen Monitor bis zum Smartphone ordentlich und gut angezeigt werden soll?

Für die Anzeige auf verschiedenen Endgeräten bietet Bootstrap Klassen, die die Ausgabe der Größe des jeweiligen Endgerätes anpassen. Ich arbeite dazu gerne mit dieser Kombination:

<div class="col-md-9 col-xs-9">Irgend ein Inhalt</div>

Bei diesem Beispiel werden die Klassen md und xs geladen.

Die Klasse md steht für mittelgroße Endgeräte, wie beispielsweise ein PC Monitor während die Klasse xs für kleine Endgeräte, wie z.B. Smartphones steht. Mit dieser Kombination decke ich diese Bereiche ab, so daß die Darstellung darauf einheitlich erscheint.

Wie bekomme ich aber nun eine feste Breite?

Auch das ist einfach.
Lädt man sich das Bootstrap-Paket herunter, so ist dort bereits alles enthalten was man benötigt. Jedoch wäre es sehr mühsam die Klassen in der Original Datei zu editieren da diese sehr umfangreich ist und eine Suche nach den entsprechenden Klassen sehr zeitintensiv wäre.

Der Trick:

Hierzu erstelle ich im Verzeichnis 'css' eine weitere, leere CSS Datei, nennen wir sie mal my_styles.css und diese Datei wird in der Ladereihenfolge als letzte CSS-Datei geladen. Durch diese Ladereihenfolge werden Klassen, die zuvor aus einer anderen Datei geladen wurden, überschrieben. Somit kann man die Originalklassen um eigene Definitionen ergänzen oder gänzlich entfernen ohne am Original zu arbeiten.
In der Datei my_styles.css definiere ich meine eigenen Styles, aber auch die Bootstrap Klassen aus der Original Datei lassen sich nun auf diese Weise leicht erweitern bzw. editieren.

Will ich nun eine feste Breite für meine Seite, so definiere ich diese in der Datei my_styles.css mit folgendem Code:

body .container {width: 1144px; !important;}

Damit wird Bootstrap angewiesen, daß die Seite, wie im Beispiel gezeigt, eine feste Breite von 1144 Pixel hat. Das wars schon. So einfach.. man muß es nur herausfinden.

Scrollbalken erzwingen

Jeder, der schonmal im Netz unterwegs war kennt sie. Die "springenden Seiten" wenn der Inhalt auf der eine Seite so lang ist daß sie über die Höhe des Monitors hinausgeht und rechts ein Scrollbalken ensteht. Auf der nächsten Seite ist der Inhalt kürzer so daß kein Scrollbalken benötigt wird und schwupps..... die Seite "springt".

Dabei ist es so einfach dieses, meiner Meinung nach, sehr unschöne Verhalten einer Website in den Griff zu bekommen:
Wie??
Ganz einfach... man ERZWINGT auf allen Seiten einen Scrolbalken.
Der nötige Code dazu ist denkbar einfach und simpel....

html {
overflow-y:scroll;
}

Ergänzt man seine CSS Datei am Anfang mit diesen Zeilen, so wird ein Scrollbalken erzwungen und die Springerei hat ein Ende.
So einfach, aber sehr effektiv und es verschönert den Anblick jeder Website.