Bootstrap: Gridbreite und Spaltenanzahl ändern

Um eine bestehen Web Site auf Bootstrap zu migrieren und das aktuelle Layout möglichst genau umzusetzen brauchte ich eine andere Breite. Auch war mit die Spalteneinteilung zu grob, so das ich von 12 auf 24 Spalten umstellen wollte. Da Bootstrap auf Less basiert und auch viele Variable bereitstellt ist dies recht einfach.

Zuerst das Packet mit Dokumentation von hier laden, auspacken und das Verzeichnis less in ein Arbeitsverzeichnis verschieben.

Mein Ziel: Anpassung der fixen Breite von 940px mit 12 Spalten auf 980px mit 24 Spalten. Die Anpassung ergibt sich aus diesem Dokument Im Standard gibt es 12 Spalten mit 60px und 11 Zwischenräume mit 20px

(12*60)+(11*20)=940

Um auf meine Größe von 980 zu kommen (oder fast ganz daran)

(24*32.20) + (23*9) = 979,8

Jetzt die Datei variable.less öffnen und die Werte setzen

@gridColumns:             24;
@gridColumnWidth:         32.20px;
@gridGutterWidth:         9px;

Dann einfach

lessc bootstrap.less > ../boostrap.css

und schon hat man ein angepasstes Stylesheet und man bekommt die Klassen mit span1 bis span24 frei Haus geliefert.