css - rejillas - secciones bootstrap

ancho de fila de fluido de arranque

Question

en bootstrap-responsive.css

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

Estaba configurando el tamaño, pero tengo curiosidad por saber cómo obtuvieron estos números, y ¿por qué tienen una precisión de 14 decimales?

Answer 1

Comienzan con tres valores, que pueden ser definidos por el usuario:

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

Editar: en Bootstrap 3.0+, las variables ahora son:

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

Y calcule el ancho de fila fijo:

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

Luego se vuelven fluidos:

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

Y finalmente, generar todos los tramos (eso es un poco confuso):

.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);
}

Como ven, MENOS las divisiones y multiplicaciones.

Véalo usted mismo:

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