css - rejillas - secciones bootstrap
ancho de fila de fluido de arranque (1)
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?
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: