Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
webworking:css:css_snippets:elemente_auf_container_wrapper_ausbrechen_lassen [17.01.2018 10:25] cbeier angelegt |
— (aktuell) | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | # Einzelne Elemente auf Container (Wrapper) ausbrechen lassen | ||
- | In Layouts wird der Inhaltsbereich gerne in einem Wrapper bzw. Container in der Breite begrenzt und zentriert. Bei Bootstrap zum Beispiel mit der Klasse `.container`. Allerdings sind so alle Kindelemente ebenfalls in der Breite begrenzt. Möchte man einzelne Elemente (z.B. ein Hero-Slider) trotzdem auf 100% der Fensterbreite bekommen, ohne auf die Begrenzung für alle anderen Elemente zu verzichten, ist folgendes CSS-Snippet sehr hilfreich: | ||
- | |||
- | <code css> | ||
- | .edge2edge { | ||
- | position: relative; | ||
- | width: 100vw; | ||
- | left: 50%; | ||
- | right: 50%; | ||
- | margin-left: | ||
- | margin-right: | ||
- | } | ||
- | </ | ||
- | |||
- | Die Klasse `.edge2edge` kann dann auf alle Elemente gesetzt werden, die aus dem Wrapper " | ||
- | |||
- | {{tag> |