Hallo, Community, gibt es eine Möglichkeit, den Spalten in einer Sektion zu verbieten, bei mobiler Darstellung (bzw. immer wenn die Breite sich reduziert) umzubrechen? Ich habe eine Sektion mit 2 Spalten mit Inhalt. Bei wenig Bildschirmbreite werden diese 2 Spalten untereinander dargestellt. Ich möchte das verhindern. Irgendwie hänge ich grad ... Danke
hallo Anette, hab deine frage gelesen und habe ein ähnliches problem: ich möchte nicht das aus horizontal 4 Inhalten in mobile nur 1 wird sondern 2. dein Beitrag ist ja etwas älter, hast du das problem mittlerweile gelöst? ich glaub das geht nur über grid-spalten im style editor unter "Bereiche" "Spaltenaufteilung" aber wie genau weiß ich leider auch nicht weil keine Einstellungsmöglichkeit für die mobile Version separat vorhanden ist. seltsam dass dir bis jetzt keiner geantwortet hat!?
Hallo, Richard, ich habe das dadurch hinbekommen, daß ich im SE verschiedene Sektionen einrichte, die je nach Displaygröße sichtbar bzw. unsichtbar sind. Ich kontrolliere also zunächst, welche Sektionen jeweils bei den beiden großen und den beiden kleinen Displays sichtbar sind. In der jeweiligen Spalte dieser Sektionen nutze ich dann statt des Widget "Bild" das Widget "html". Damit hat man die Möglichkeiten, über die cols-Definition die Umbrüche der verschiedenen Absätze für verschiedene Displays zu kontrollieren. Hier ein Bsp., welches eine Zweierreihe divs mit Bild erzeugt, die auf kleinen Displays nicht untereinander, sondern nebeneinander angezeigt werden. Gesteuert über "col-xs-6 col-sm-6" teilen sich die beiden Bilder die verfügbaren 12 Spalten je zur Hälfte. Mit der Cols-Definition kann man jede Verteilung, auch asymetrisch, organisieren. Also z.B. div1 mit "col-xs-3 col-sm-3" und div2 mit "col-xs-9 col-sm-9". Schau gerne mal unter www.outdoo.store, wie es sich auswirkt. <div class="row cat-boxes"> <div class="col-xs-6 col-sm-6" style="background: #FFFFFF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #FFFFFF; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> <img class="img-responsive" src="xy.jpg" /> </div> <div class="col-xs-6 col-sm-6" style="background: #FFFFFF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: solid; border-color: #FFFFFF; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> <img class="img-responsive" src="xy.jpg" /> </div> </div>
Für alle die mit dem Thema Probleme haben, hier https://holdirbootstrap.de/css/#grid ist alles genau Beschrieben
Ich habs hinbekommen. Falls es jemand braucht (die vorletzte Zeile) <a href="(Link nur für registrierte Nutzer sichtbar.)"><img class="img-responsive" src="xy.jpg" /></a>
hallo Anette, hatte etwas wenig zeit deshalb gestern nur der danke button. hier etwas ausführlicher: vielen dank für deine mühe, war sehr sehr hilfreich, nicht nur für meinen speziellen fall sondern generell. und auch gut erklärt mit Beispiel. habs gleich umgesetzt. danke nochmal. übrigens schöne seite hast du grüsse Richard