Spalten floats in Bootstrap

Unterschiedliche Spaltenhöhen führen bei mehrzeiligen Ausgaben zu einem Float Problem - das ist nicht nur bei Booststrap so, sondern eine genrelle Eigenschaft gefloateter Blöcke.


Ein Beispiel zu Veranschaulichung:


Die Ausgabe wäre dann entsprechend so:

 

Da wir mit einem CMS arbeiten und nicht unbedingt wissen wie lang der Inhalt jedes Blockes ist, können Floatprobleme auftreten. Die gleiche Ansicht mit unterschiedlichen Textlängen:

 

Durch die Höhe des zweiten Elementes floatet Block 4 nicht an den Anfang der Zeile. Es entstehen unschöne Lücken. Gelöst wird das Problem in statischen Seiten mit einem clearfix nach der dritten col-Klasse. Die Ausgabe wäre dann so:


Da wir aber in der Regel Backenspalten ausgeben oder über einen foreach View Helper Content ausgeben, werden die col-divs dynamisch erzeugt. Wir haben also nicht wirklich die Chance im Template ein Clearfix einzubauen ....


Lösungsansätze für Floatprobleme in dynamisch erzeugtem Content

Es gibt nun eine Reihe von Möglichkeiten um dem Problem zu begegenen.

1. Blocklänge per CSS begrenzen

Das ist in den meisten Fällen nicht wirklich eine Lösung, aber hier der Vollständigkeit halber ...

Wir können per CSS jedem Block eine Höhe und ein overflow hidden vorgeben. Damit werden zu lange Texte einfach abgeschnitten....

.col-md-4 {
    height: 200px;
    overflow: hidden;
}

2. Wir machen alle Blöcke gleich groß

Mit ein wenig jQuery können wir die Höhe aller Blöcke auslesen und setzten in einem zweitem Schritt die Blockhöhe auf den Wert des längsten Blocks. Dazu ergänzen wir die Col-Divs mit der Klasse "make-blocks-equal" und den Rest erledigt folgendes Script:

 

if ($('.make-blocks-equal').length) {
    var blockheight = 0;
    $.each($('.make-blocks-equal'), function (index, block) {
        if ($(this).outerHeight() > blockheight) {
            blockheight = $(this).outerHeight();
        }
    });
    $.each($('.make-blocks-equal'), function (index, block) {
            $(this).css('height', blockheight);
        }
    });
};

3. Innerhalb einer for-each Schleife

Wenn wir mit dem for each View Helper Content ausgeben, können wir ein clearfix dynamisch einbauen.
Ein Beispiel:

<f:for each="{objects}" as="object" iteration="iter">
<div class="col-md-4">
     {object.myValue}
     <f:if condition="{iter.cycle}%3">
        <div class="clearfix"></div>
     </f:if>
</div>
</f:for>

Damit wir hinter jedem dritten Objekt ein clearfix Div erzeugt.

4. nth-of-type CSS

Die CSS Anweisung nth-of-type wird ab IE9 interpretiert. Wer also den IE8 außen vorlassen kann, für den ist dies auch eine Alternative:

col-md-4:nth-of-type(3n+0):after {
     clear: both;
}

5. Gridelements

Wer die Spalten mit Gridelements erzeugt, kann direkt mit einer row wrappen. Beispiel für Gridelements:

tt_content.gridelements_pi1.10=<lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
  # ID des gridelements
  1 < lib.gridelements.defaultGridSetup
  1 {
    columns {
      # colPos ID
      1 < .default
      1.wrap = <div class="col-md-4">|</div>
      2 < .default
      2.wrap = <div class="col-md-4">|</div>
      3 < .default
      3.wrap = <div class="col-md-4">|</div>
    }
    wrap = <div class="row">|</div>
  }

Es gibt also viele Wege das Problem in den Griff zu bekommen. Unlängen schwieriger wird es, wenn Ihr in den verschiedenen Auflösungen eine unterschiedliche Spaltenanzahl zeigen wollt. Für diese Fälle sollte zumindestens die Version "make-blocks-equal" funktionieren. Aber diese Funktion bitte nicht in den mobil Ansichten ausführen, das gibt da wieder ganz andere Probleme ....

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

CSS: Das umfassende Handbuch

Wer mal abseits vom Monitor ein passendes Buch zur Hand nehmen will, dem kann ich das Standardwerk von Kai Laborenz empfehlen.
800 Seiten geballte Information über CSS, Frameworks, Barierefreiheit Media Queries & Co.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.