5 bình đẳng kéo dài trong 1 Row - Twitter Bootstrap

Question

Sử dụng cách bố trí lưới chất lỏng tôi có thể nhận được 4 nhịp bằng nhau:

<div class="row-fluid"> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
</div> 

Hoặc tôi có thể nhận 6 nhịp bằng nhau:

<div class="row-fluid"> 
    <div class="span2">...</div> 
    <div class="span2">...</div> 
    <div class="span2">...</div> 
    <div class="span2">...</div> 
    <div class="span2">...</div> 
    <div class="span2">...</div> 
</div> 

Nhưng làm cách nào để nhận được 5 nhịp bằng nhau?

Answer 1

Xét rằng theo mặc định bootstrap là 12 cột, bạn không thể nhận được toán học 5 nhịp bằng nhau.

Tuy nhiên, nếu bạn thực sự cần (ý tưởng tồi, nhiều hơn về điều đó trong một giây), bạn có thể tùy chỉnh tải xuống bản tải xuống của mình để có 15 cột.

http://twitter.github.com/bootstrap/customize.html

Thay đổi @gridColumns biến đến 15, sau đó sử dụng 5 cột tất cả với một span3.

Đó là một ý tưởng tồi. Bootstrap là 12 cột vì 12 hoạt động tốt. Sử dụng 12 cung cấp cho bạn hỗ trợ cho các cột chiều rộng 1/4, 1/3 và 1/2. Với bố cục 15 cột, bạn sẽ chỉ có hỗ trợ cho chiều rộng 1/3 (và nhiều kích thước khác lạ). Cuộc gọi của bạn mặc dù, các thiết lập là có.

Answer 2

Vâng, đó là toán học. Không phải là vấn đề CSS/Bootstrap thực ...

Bạn sẽ không thể tạo 5 nhịp bằng nhau trong một hàng vì cột lưới mặc định của Bootstrap là 12 và 12/5 = 2.4.

Answer 3

Bạn cần phải generate lưới tùy chỉnh (ví dụ: 10). Không có cách nào để tạo 5 số liệu thô bằng lưới 12 cột

Answer 4

Tôi đã chuyển đổi điều này thành vấn đề 10/2 = 5 bằng cách tạo hàng lỏng của span10 và sau đó có hàng dòng con với span2 children. Các công trình sau:

<div class="container-fluid"> 
    <div class="row-fluid span10"> 
      <div class="row-fluid"> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
      </div> 
    </div> 
    <div class="row-fluid span10"> 
      <div class="row-fluid"> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
       <div class="span2">...</div> 
      </div> 
    </div> 
</div> <!-- /container --> 

Answer 5

Tôi đã làm theo các phương pháp bootstraps để tính chiều rộng và đã đưa ra những điều sau đây. Bạn sẽ muốn làm theo cấu trúc HTML của như sau:

<div class="row-fluid-5"> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div> 
</div> 

Sau đó, sau khi bạn tải bootstrap.css và bootstrap-responsive.css, tải file custom.css của bạn như sau:

/* CUSTOM 5 COLUMN SPAN LAYOUT 
    * 
    * based on http://gridcalculator.dk/ 
    * width => 1200, gutter => 15px, margin => 15px, columns => 5 
    */ 
.row-fluid-5 { 
    width: 100%; 
    *zoom: 1; 
} 
.row-fluid-5:before, 
.row-fluid-5:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 
.row-fluid-5:after { 
    clear: both; 
} 
.row-fluid-5 [class*="span"] { 
    display: block; 
    float: left; 
    width: 100%; 
    min-height: 30px; 
    margin-left: 1.875%; 
    *margin-left: 1.875%; 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.row-fluid-5 .controls-row [class*="span"] + [class*="span"] { 

    margin-left: 1.875%; 
} 
.row-fluid-5 [class*="span"]:first-child{ 
    margin-left: 0; 
} 
.row-fluid-5 .span2 { 
    width: 18.5%; 
    *width: 18.5%; 
} 

/* responsive ONLY */ 

@media (max-width: 600px){ /* spans reduce to 100px then go full width */ 

    .row-fluid-5 [class*="span"]{ 
    margin-left: 0; 
    float: left; 
    width: 100%; 
    padding: 10px; 
    } 
} 

Kiểm tra bản trình diễn bên dưới để xem cách hoạt động.

DEMO

Answer 6

Tại sao không chỉ cần sử dụng bảng.Đây là những gì tôi sử dụng và chiều rộng đáp ứng

<div class="row-fluid"> 
    <div class="span12"> 
    <table class="table"> 
    <tbody> 
    <tr> 
     <td width="20%">1</td> 
     <td width="20%">2</td> 
     <td width="20%">3</td> 
     <td width="20%">4</td> 
     <td width="20%">5</td> 
    </tr> 
    </tbody> 
    </table> 

</div> 
</div> 

Answer 7

.span3 { width: 220px; } 
.span2 { width: 140px; } 

hoặc

.row-fluid .span3 { width: 23.404255319148934%; *width: 
23.351063829787233%; } 

.row-fluid .span2 { width: 14.893617021276595%; *width: 
14.840425531914894%; } 

Những chỉ được cung cấp của phần tử, bạn sẽ có thể chỉ cần thêm

class="span" style="width:180px" 

hoặc

class="span" style="width:19.1488%" 

Bạn cần phải thêm bootstrap cos lớp học cần những cho .row hoạt động.

Answer 8

Hoặc bạn có thể thêm điều này vào css của bạn (hoặc bootstrap.css) - Đây là cách ưa thích của tôi để giải quyết vấn đề này. "15" được sử dụng để ném cho tôi một chút, nhưng chỉ cố gắng nhắc nhở bản thân nó là 1/5.

.col-xs-15, 
.col-sm-15, 
.col-md-15, 
.col-lg-15 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; 
} 

.col-xs-15 { 
    width: 20%; 
    float: left; 
} 
@media (min-width: 768px) { 
.col-sm-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 992px) { 
    .col-md-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 1200px) { 
    .col-lg-15 { 
     width: 20%; 
     float: left; 
    } 
} 

Sau đó, chỉ cần sử dụng nó như bạn làm với bất kỳ lớp bootstrap nào khác.

<div class="row"> 
    <div class="col-md-15 col-sm-3"> 
    ... 
    </div> 
</div>