Umbruch mit bootstrap

[Gunnar Bittersmann]

@@FrankMe

ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern.

Als erstes wäre das Markup zu verbessern:

      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" />
        <h4>Java</h4>
      </div>

Das sind keine Überschriften; die Auszeichnung als h4 ist falsch. Ersetze <h4> durch <p>, <div>, <span> oder auch gar nichts. End-Tags entsprechend.

Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste:

<h2>Software - Technologien</h2>
<ul class="row">
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		<img src="images/icons/java256_256.png" alt="" width="64" height="64" />
		Java
	</li>
	⋮
</ul>

Bullets bekommst du mit list-style: none weg; Abstände mit margin und padding.

Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist alt="" zu setzen.

Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun.

Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht.

Was ist eine gute Lösung, um dieses Verhalten zu umgehen?

Die Bootstrap-Lösung wäre wohl:

• nach jedem 2. div ein <div class="clearfix visible-xs-block"></div> einfügen,
• nach jedem 3. div ein <div class="clearfix visible-sm-block"></div> einfügen,
• nach jedem 4. div ein <div class="clearfix visible-md-block"></div> einfügen,
• nach jedem 6. div ein <div class="clearfix visible-lg-block"></div> einfügen.

😱

bzw. als li in der Liste.

Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat:

<ul class="row">
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
		<li class="clearfix visible-xs-block"></li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
		<li class="clearfix visible-sm-block"></li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
		<li class="clearfix visible-xs-block visible-md-block"></li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
		<li class="clearfix visible-xs-block visible-sm-block visible-lg-block"></li>
	<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li>
	⋮
</ul>

Aber du hattest ja nach einer guten Lösung gefragt.

Und die ist: keine Floats verwenden. Also kein Bootstrap.

Sondern zur Not (und als Fallback) display: inline-block sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine media queries erforderlich).

• Beispiel Flexbox
• Beispiel Grid
• Beispiel Grid

LLAP 🖖