我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

上面演示的五列网格是twitter引导框架的一部分吗?


当前回答

自举网格系统分为12个网格。所以我把它分成两个网格(7+5)。这7和5也包含满12格。这就是为什么我分开了7(4+4+4)和5(6+6),这样就可以得到所有的内容,很简单

HTML

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-7 five-three">
      <div class="row">
        <div class="col-sm-4">
          Column 1
        </div>
        <div class="col-sm-4">
          Column 2
        </div>
        <div class="col-sm-4">
          Column 3
        </div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6">
          Col 4
        </div>
        <div class="col-sm-6">
          Col 5
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}

其他回答

我对Mafnah的答案进行了投票,但再看一遍,如果你保持默认的边际,我建议下面的答案更好。

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

.equal .span2 {
    width: 17.9%;
}

为5列布局创建自定义引导下载

进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。

注意:如果你使用LESS,更新变量。而不是更少。

在我看来,像这样使用Less语法更好。 这个答案是基于@fizzix的回答

这样列使用用户可能覆盖的变量(@grid-gutter-width, media breakpoints), 5列的行为与12列网格的行为匹配。

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */

与flexbox http://output.jsbin.com/juziwu

.flexrow { 显示:flex; 背景:浅灰色;/ * * /调试 } .flexrow > * { flex: 1; 保证金:1 em; 大纲:自动绿色; } < div class = " flexrow”> < div >…< / div > < div >…< / div > < div >…< / div > < div >。< br >。< / div > < div >…< / div > < / div >

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

.equal .span2 {
    width: 20%;
}