1 Laatst bewerkt door Jeffrey Arts (11-02-2015 11:59:52)

Onderwerp: Bootstrap beperkingen

Goedendag,

Ik werk nu een klein jaartje met Twitter Bootstrap (3) en ik merk dat ik vaak tegen dezelfde problemen aanloop, en hier dan ook geregeld dezelfde oplossing(en) voor toepas. Een voorbeeld hiervan is bijvoorbeeld de dubbele kolom op mobiel met .col-xs-6.

Dat werkt prima op devices boven de ~360px, maar wanneer je op een kleiner toestel zit te kijken is er simpelweg geen ruimte om 2 kolommen van 140px naast elkaar te zetten. Hiervoor heb ik de custom class .col-xxs-12 geschreven en dit lost het probleem prima op.

CSS

@media screen and ( max-width: 360px) {
    .col-xxs-12 {
        width: 100%;
    }
}

HTML

<div class="col-xxs-12 col-xs-6">Kolom 1</div>
<div class="col-xxs-12 col-xs-6">Kolom 2</div>

Nu vroeg ik mij alleen af of jullie misschien ook dit soort problemen zijn tegen gekomen in jullie ontwikkeling met Twitter Bootstrap en uiteraard ben ik ook nieuwsgierig naar de oplossingen die jullie hiervoor hebben bedacht.

2

Re: Bootstrap beperkingen

Dit probleem blijf je hebben. Het feit is dat je altijd beperkingen hebt als je met zulke resoluties bezig bent. Ik probeer altijd 2 kolommen naast elkaar te vermijden onder de 768px. Daarnaast is het niet functioneel om dezelfde functionaliteiten zichtbaar te laten zijn op mobiele apparaten. 

Je eigen custom css is een nette oplossing.