Ich entwickele gerade ein Theme für Contao 4.9 mit der Extension contao-bootstrap.
Das Layout sieht vor, dass es sowohl Bereiche gibt die gesamte Browserbreite nutzen und welche, die nur in einem fixen container mittig platziert werden.
Z.B. ce_text (mit Bild in voller Breite), ce_headline (max-width 1500px) und das Grid (max-width 1500px) sollen verwendet werden. Ich brauche kein Grid in voller Breite.
Layout
layout.jpg
Mein Problem ist, dass ein div mit 100% Breite bei Bootstrap ja die Klasse "container-fluid" haben müsste und sich nicht in einem anderen div mit der klasse "container" befinden darf.
Standardmäßig gibt Contao aber folgendes aus, obwohl ich im Inhalt noch mal volle Breite für ein Bild brauche:
Alles was jetzt folgt - auch ein div mit der Klasse fluid-container, kann somit nicht mehr die volle Breite haben. Die Verschachtelung bzw. der Konflikt der Klassennamen ist also mein Problem.HTML-Code:<div class="container" id="container"> <main id="main" itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage"> <div class="inside">
Muss ich jetzt alle betreffenden Templates anpassen um bei Contao sämtliche Angaben der Klasse "container" zu entfernen oder sollte ich die Bootstrap-Dateien so anpassen, dass anstelle von "container" eine andere Klassenbezeichnung gewählt wird? Oder verstehe ich etwas grundlegend nicht?
Ein anderer Ansatz wäre es so zu lösen, dass ich das Bootstrap-Grid nur innerhalb des Contao main-containers mit max-width 1500px verwende und nicht den fluid-container. Aber wie kann ich dann im main-Bereich (der über die container-Klasse bereits auf 1500px begrenzt ist) dennoch die volle Bildschirmbreite hinaus für ein Bild nutzen? Dies wäre wohl eher keine Bootstrap, sondern eine Contao/CSS Frage oder?