Responsive multi-column list: verschil tussen versies
Uit MediaWikiGids
(→Pure CSS) |
(→Pure CSS) |
||
| Regel 19: | Regel 19: | ||
Zie : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld] | Zie : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld] | ||
| − | <div class="columns"> | + | <div class="columns" style="width:100%;"> |
<ul> | <ul> | ||
<li>William Brown</li> | <li>William Brown</li> | ||
Versie van 21 feb 2019 om 17:49
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
NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".
- Cell_1
- Cell_2
- Cell_3
- Cell_4
- Cell_5
- Cell_6
- Cell_7
Pure CSS
Zie : voorbeeld
- William Brown
- Miss Havisham
- Rupert Campbell-Black
- Julien Sorel
- Sherlock Holmes
- Nigel Molesworth
- Harriet M Welsch
- Oskar Schell
- Elinor Dashwood