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

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

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

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

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

更新2019

引导4.1 +

下面是5个相同的全宽列(没有额外的CSS或SASS)，使用自动布局网格:

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

这个解决方案是有效的，因为Bootstrap 4现在是flexbox。你可以让5列在相同的.row中使用换行符，如<div class="col-12"></div>或<div class="w-100"></div>每5列。

也请参阅:引导- 5列布局

在我的例子中，仅仅使用col并没有得到正确的效果。所有项都将出现在彼此旁边，我不想用PHP计算出什么时候放置行元素。

那么如何创建一个类来扩展我们的引导col特性呢?如果人们想知道如何在不使用col类的情况下使5列与Bootstrap一起工作。

插件/ bootstrap.less:

@media @md {
    .col-md-2-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

我将其命名为.col-md-2-4，因为Bootstrap的12个网格布局除以5等于2.4。

现在你可以创建一个5列的布局。也可以与其他断点列类结合使用:

<div class="col-6 col-sm-4 col-md-2-4">
   1/5 column
</div>

注意，我添加了一个媒体查询，语句周围的代码更少。因此，如果您想添加其他列断点类，请确保围绕它使用正确的媒体查询。

五列显然不是bootstrap设计的一部分。

但是对于Bootstrap v4 (alpha)，有两件事可以帮助处理复杂的网格布局

Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/)，新的元素类型(官方- https://www.w3.org/TR/css-flexbox-1/) 响应式实用程序(http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

简单来说，我在用

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

不管是5 7 9 11 13还是其他概率，都没问题。 我非常确定12网格标准能够服务于90%以上的用例——所以让我们以这种方式设计——也更容易开发!

flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”

如何在引导中添加5列网格

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;} .item{width:100%;height:100px; background-color:#cfcfcf;} .col-xs-1-5{width: 20%;float:left;} } @media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} } @media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} } @media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} } <div class="row"> <div class="col-sm-1-5"> <div class="item">Item 1</div> </div> <div class="col-sm-1-5"> <div class="item">Item 2</div> </div> <div class="col-sm-1-5"> <div class="item">Item 3</div> </div> <div class="col-sm-1-5"> <div class="item">Item 4</div> </div> <div class="col-sm-1-5"> <div class="item">Item 5</div> </div> </div>

用于引导5或更高版本

可以使用row-cols- class名称。

例如:row-col -1, row-col -5, row-col -lg-5

<div class="container">
  <div class="row row-cols-5">
     // place your all cols here
  </div>
</div>

更多信息请阅读官方文档