Layoutspalten verwenden nach Update andere/falsche Bootstrap-Klassen

  • Hallo,


    nach einem Joomla- und/oder SP-Page-Builder-Update fliegt mir die Kopfzeile in der mobilen und in der Tablet-Ansicht auseinander. Ursache: Die Spalten passen nicht mehr in eine Zeile, weil sie zu breit sind. Der Unterschied zu vorher ist, dass nun andere Bootstrap-Klassen verwendet werden, in der mobilen Ansicht zum Beispiel col-lg-8 statt wie vorher col-xs-8.

    HTML
    <div id="sp-menu" class="col-lg-8 " style="position: static;"> ...

    Überschreibe ich die Klassenaufrufe im HTML, passt es wieder.

    HTML
    <div id="sp-menu" class="col-xs-8 " style="position: static;"> ...

    Unter Erweiterungen > Templates > Stile > Layout standen vor dem Update in den Spalteneinstellungen die xs-Klassen zur Auswahl. Für das mobile zum Beispiel col-xs-1 bis col-xs-12. Jetzt sind es col-1 bis col-12. An welcher Stelle ist festgelegt, welche Bootstrap-Klassen in der mobilen und er Tablet-Ansicht zur Verfügung stehen?


    So sieht's auf der Seite und in der Konfiguration aus:

  • Die Klasse col-xs (extrasmall) ist möglicherweise ein Auslaufmodell.
    Demnach basiert dein Screenhot (unten) auf Bootstrap 3.

    Ist kein Auslaufmodell ;)
    ---------------


    Grid system
    Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass…
    getbootstrap.com



    Gemäss #2 Link wäre gut
    ---------------

  • Doch ist es schon. Die Klassen col-xs- gibt es nicht mehr explizit. Die sind jetzt halt einfach nur noch col-.


    Grund ist, dass man in BS5 am besten von schmal nach breit denkt/programmiert. "Mobile first!"


    Habe ich ein col-2 und will ab ≥768px eben drei, schreibt man "col-2 col-md-3". Will man ab ≥1200px dann 4 schreibt man also "col-2 col-md-3 col-xl-4". So verhält sich das mit allen Breakpoint-Helper-Klassen.

  • Update: Also mein SP Page Builder scheint von einem Bootstrap v4 oder v5 auszugehen, obwohl v3 auf der Website (noch) verwendet wird. Mal schauen, wie ich den SPB wieder von BS v3 überzeugen kann ...

    xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).

  • Update: Also mein SP Page Builder scheint von einem Bootstrap v4 oder v5 auszugehen, obwohl v3 auf der Website (noch) verwendet wird. Mal schauen, wie ich den SPB wieder von BS v3 überzeugen kann ...

    Quatsch: Nicht den SP Page Builder, sondern Helix3 meinte ich ...