Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
Bootstrap3 mit 5 Spalten? So geht's!
#Tutorials#CSS#HTML
Bootstrap 3 funktioniert ja schon echt gut, doch manchmal passt das Grid einfach nicht auf ein angedachtes Design. Möchte man, wie ich letztens 5 Spalten in einer Reihe haben, dann kann man folgendes in seine CSS Datei einfügen, natürlich erst nachdem Bootstrap geladen wurde.
<code class="language-css">
// 5 Columns
@media (min-width: 768px){
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 1200px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
</code>
Hat man das getan, muss man nur die Klasse "fivecolumns" an den Row-Div-Container einhängen. Das Ganze sieht dann ca. so aus:
<code class="language-markup">
<div class="container">
<div class="row fivecolumns">
<div class="col-md-2">1/5 Spalte</div>
<div class="col-md-2">2/5 Spalte</div>
<div class="col-md-2">3/5 Spalte</div>
<div class="col-md-2">4/5 Spalte</div>
<div class="col-md-2">5/5 Spalte</div>
</div>
</div>
</code>
Viel Spaß mit eurem 5-Spaltigen Designs ;)
Kommentare
Hat alles geklappt.
Du hast alles doppelt und falsch verschachtelt und in falscher Reihenfolge genommen. Das hier reicht vollkommen:
// 5 Columns
.fivecolumns .col-xs-2, .fivecolumns .col-sm-2, .fivecolumns .col-md-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
Hinterlasse einen Kommentar