bootstrap hàng chất lỏng rộng

Question

trong bootstrap-responsive.css

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

Tôi đã cấu hình kích thước, nhưng tò mò như thế nào họ có nguồn gốc những con số này, và tại sao họ chính xác đến 14 chữ số thập phân?

Answer 1

Họ bắt đầu với ba giá trị, có thể là do người dùng định nghĩa:

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

Edit: trên Bootstrap 3.0+, các biến hiện nay là:

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

Và tính toán chiều rộng cố định hàng :

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

Sau đó, chất lỏng:

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

và cuối cùng, tạo ra tất cả các nhịp (có nghĩa là một chút bối rối):

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

Như bạn thấy, LESS hiện các bộ phận và phép nhân.

Xem nó tự hỏi:

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