Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
webworking:css:css_snippets:elemente_auf_container_wrapper_ausbrechen_lassen [17.01.2018 10:25]
cbeier gelöscht
— (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: -50vw; 
-  margin-right: -50vw; 
-} 
-</code> 
- 
-Die Klasse `.edge2edge` kann dann auf alle Elemente gesetzt werden, die aus dem Wrapper "ausbrechen" sollen. 
- 
-{{tag>snippet css bootstrap}}