5 slopců pomocí bootstrapu

5 slopců pomocí bootstrapu
(Čtení tohoto článku zabere přibližně: 1 - 2 minut/y.)

Bootstrap je můj oblíbený css framework, ale stejně jako všechny frameworky, i zde mi občas neco chybí. Hlavně v momeňte, kdy je grafik až moc kreativní. V tomto případě ale nejde o nic nestandardního, ale pouze něco, co v bootstrapu chybí.

V tomto případě rozdělení řádku do 5-ti stejných sloupců. Tedy velmi jednoduchý úkon, ale s tím bootstrap úplně nepočítal. Tedy lze to udělat pomocí odsazení:

<div class="row">
<div class="col-md-2 col-md-offset-1">20%</div>
<div class="col-md-2">20%</div>
<div class="col-md-2">20%</div>
<div class="col-md-2">20%</div>
<div class="col-md-2">20%</div>
</div>

Při tomto řešení se ale nevyužije 100% šířka, tedy se vlastně nejedná o rozložení po 20%, ale nějakých 17%.

 

Pokud chceme využít opravdu 100% stránky, tak je třeba upravit css styly bootstrapu.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 20%;
float: left;
}

@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

I toto řešení má své nevýhody. Jelikož pracujete s responsibilním designem, tak lichý počet prostě nikdy neposkládáte jinak než do řádku, což může být problém u mobilních zařízení.

Václav

Programátor... občas normální, častěji tak trochu blázen.

Internetová stránka: www.valeas.cz

 

Zanechat komentář

Ujistěte se, že zadáte požadované informace, tam kde je vyznačeno (*). Kód HTML není povolen.