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

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


当前回答

您可以使用小技巧,使colo -md-2与偏移解决方案全宽。它使用bootstrap删除(隐藏)15px填充的方法。

我的意思是添加“-”页边距。实际上是calc(-10% - 15px);两边都有空白。(10%为偏移宽度,15px为填充)。

唯一的缺点是它会使页面水平滚动,所以你需要在父行中隐藏overflow-x:。

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

这里是演示:http://jsfiddle.net/sct3j/171/

其他回答

<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%;
}

在Bootstrap 3中启用5列的另一种方法是修改Bootstrap默认使用的12列格式。然后创建一个20列的网格(在Bootstrap网站上使用自定义或使用LESS/SASS版本)。

要在引导网站上进行自定义,请访问自定义和下载页面,将变量@grid-columns从12更新为20。然后,您将能够创建4以及5列。

使用5个div,类为span2,并给第一个类为offset1。

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

瞧! 五列等距居中。


在引导3.0中,这段代码看起来像

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

更新

因为bootstrap 4.0默认使用Flexbox:

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

在我看来,像这样使用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 */

对于@lightswitch的回答,如果我们需要使用更少迭代的5列网格

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

这将生成css类。col-md-5th-1, col-md-5th-2, col-md-5th-3,等等,对应10%,20%,30%…分别