Beispiel Responsives Webdesign in Bootstrap

Beispiel Responsives Webdesign in Bootstrap zum Ausprobieren und Weiterverwenden

Mit einem responsivem (=reaktionsfähigem) Webdesign ist es möglich anhand von CSS3 MediaQueries verschiedene CSS-Regeln zu definieren, die je nach Displaygröße, verwendet werden oder nicht.

Auf diese Weise lässt sich durch die Angabe bestimmter Bootstrap-Klassen, das Layout für unterschiedliche Ausgabemedien sehr bequem steuern.

Als Resultat erhält man eine HTML-Struktur, die auf alle Geräten (Desktop-PC, Tablet, Smartphone) optimiert ausgegeben wird.

Frage stellen
Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Beispiel Responsives Webdesign in......"

Ingo fragt

Ich habe 6 Spalten angelegt und in jede Spalte ein Bild eingefügt. Der seitliche Abstand zwischen zwei Bildern ist mir zu groß. Wie kann ich den Zwischenraum zwischen den Spalten beeinflussen?
Danke schon mal für einen Tipp. Gruß, Ingo

Antwort von BootstrapWorld.de

Hallo Ingo,

vielen Dank für Deine Frage. Ich habe Dein Problem im Snippet-Editor nachgebaut. Am einfachsten funktioniert das, wenn du ein zusäzliche Klasse in deiner Zeile vergibst (.row-images) und dann durch diese Klassen den Abstand (padding) der Spalten (.col-md-XX) anpasst.
Klingt schwieriger, als es ist: https://www.bootstrapworld.de/snippet/abstand-bilder

Viele Grüße

Andreas

Volker fragt

Grundlage: 4-spaltiges Layout - linke Spalte (3er) ist Navi, rechts Inhaltsbereich aus 3 3er-Spalten. Wie kann ich im Inhaltsbereich den Außenabstand der äußersten rechten Spalte beinflussen (größerer Abstand) ohne dass ein Konflikt mit der Startseite (Fullscreen-Bild) auftritt?
Vielen Dank für einen Vorschlag!

Antwort von BootstrapWorld.de

Hallo Volker,

vielen Dank für deine Frage. Entschuldige die späte Rückmeldung, ich müsste erst noch meine Bootstrap Experimente-Seite programmieren.

Zu deine Frage:
Du kannst mittels einer CSS-Regel den Innenabstand (padding) beliebig einstellen. Ein Beispiel habe ich hier erstellt: https://www.bootstrapworld.de/snippet/spaltenabstand

Wichtig ist das "padding-left: 10em" in der Klasse .col-md-9.

Viele Grüße

Andreas

 

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK