5行中的平等跨度 - Twitter Bootstrap

Question

使用流体网格布局我可以得到4个相等的跨距:

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

或者我可以获得6个相等的跨度:

<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>

但是我如何得到5个相等的跨距？

Answer 1

我已经遵循bootstraps方法来计算宽度,并提出了以下内容.您将需要遵循以下HTML结构:

<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>

然后,在加载bootstrap.css和bootstrap-responsive.css之后,使用以下命令加载custom.css文件:

/* 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; 
    }
 }

查看下面的演示,看看它是如何工作的.

DEMO

Answer 2

考虑到默认情况下 bootstrap 为 12 列，您无法在数学上获得 5 个相等的跨度。

但是，如果您确实需要（坏主意，稍后会详细介绍），您可以自定义引导程序下载以包含 15 列。

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

将变量更改@gridColumns为 15，然后使用 5 列，全部带有span3.

但这是一个坏主意。Bootstrap 是 12 列，因为 12 列效果很好。使用 12 可支持 1/4、1/3 和 1/2 宽度的列。对于 15 列布局，您将仅支持 1/3 宽度（以及许多奇怪的其他尺寸）。不过你的电话，设置就在那里。