Responsive multi-column list: verschil tussen versies

Versie van 21 feb 2019 om 18:23

Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.

Oplossing met Bootstrap

Wanneer Bootstrap beschikbaar is, kan een lijst met behulp van het "grid" responsive worden weergegeven:

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3" style="margin: 0; padding: 0; border: 0;">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
</ul>

NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".

Het resultaat ziet er zo uit:

Cell_1
Cell_2
Cell_3
Cell_4
Cell_5
Cell_6
Cell_7

Bron: Voorbeeld

Pure CSS

Op basis van alleen CSS3 werkt deze oplossing met toevoeging van een enkele class:

/* Responsive multi column list -  https://codepen.io/ThiefMaster/pen/afGbB */
/*CSS3 multiple columns.*/
/* Get em size for colums: 184/16 */   
.columns
{   
    -moz-column-width: 11.5em; /* Firefox */
    -webkit-column-width: 11.5em; /* webkit, Safari, Chrome */
    column-width: 11.5em;
}
/*remove standard list and bullet formatting from ul*/
.columns ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child
{
    margin-top:0px;
}

Het voordeel van deze methode is dat hij goed werkt in combinatie met de standaard wikitekst voor lijsten en standaard de sorteerrichting van de kolom aanhoudt.

item 1
item 2
item 3
linked item 4
linked item 5
linked item 6

Ook de HTML-tekst kan worden gebruikt:

William Brown
Miss Havisham
Rupert Campbell-Black
Julien Sorel
Sherlock Holmes
Nigel Molesworth
Harriet M Welsch
Oskar Schell
Elinor Dashwood

Bron : voorbeeld

@@ Regel 2: / Regel 2: @@
 == Oplossing met Bootstrap ==
+Wanneer [[Bootstrap voor MediaWiki|Bootstrap]] beschikbaar is, kan een lijst met behulp van het "grid" responsive worden weergegeven:
+<pre><ul class="list-group row">
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3" style="margin: 0; padding: 0; border: 0;">Cell_1</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_2</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_3</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_4</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_5</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_6</li>
+    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
+</ul></pre>
 NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".
+Het resultaat ziet er zo uit:
 <ul class="list-group row">
@@ Regel 14: / Regel 28: @@
      <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
 </ul>
+Bron: [https://stackoverflow.com/questions/19836567/bootstrap-3-multi-column-within-a-single-ul-not-floating-properly Voorbeeld]
 == Pure CSS ==