Bootstrap Fluidzeilenbreite

Question

in Bootstrap-responsive.css

.row-fluid .span10{ 
    width: 91.45299145299145%; 
    *width: 91.39979996362975%; 
} 

ich die Dimensionierung wurde die Konfiguration, aber neugierig ist, wie sie diese Zahlen abgeleitet, und warum sind sie auf 14 Dezimalstellen genau?

Answer 1

Sie beginnen mit drei Werten, die vom Benutzer definiert werden können:

@gridColumns: 12; 
@gridColumnWidth: 60px; 
@gridGutterWidth: 20px; 

Edit: auf Bootstrap 3.0+, sind die Variablen jetzt:

@grid-columns 
@grid-gutter-width 
@grid-float-breakpoint // the point at which the navbar stops collapsing 

Und feste Zeilenbreite berechnen :

@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 

Dann gehen sie flüssig:

@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 

Und finaly, erzeugen alle Spannweiten (das ist ein bisschen verwirrend):

.spanX (@index) when (@index > 0) { 
    (~".span@{index}") { .span(@index); } 
    .spanX(@index - 1); 
} 

.span (@columns) { 
     width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); 
     *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5/@gridRowWidth * 100 * 1%); 
} 

.row-fluid { 
    // generate .spanX and .offsetX 
    .spanX (@gridColumns); 
    .offsetX (@gridColumns); 
} 

Wie Sie sehen, nur der Divisionen und Multiplikationen tut.

Sehen Sie selbst:

1. https://github.com/twitter/bootstrap/blob/master/less/variables.less
2. https://github.com/twitter/bootstrap/blob/master/less/mixins.less