Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| — |
webworking:css:css_snippets:elemente_aus_container_wrapper_ausbrechen_lassen [17.01.2018 10:26] (aktuell) cbeier angelegt |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| + | # Einzelne Elemente aus 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> | ||