在推特引导中有五个相等的列

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

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

474614 次浏览

小开

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

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

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

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

注意:如果你使用LESS，更新variables.less代替。

小开

最佳答案

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

< p >瞧!

在引导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>

小开

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

小开

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

小开

保持原始的12列引导，不要自定义它。你唯一需要做的修改是一些css 后原始的引导响应css，像这样:

下面的代码已经为Bootstrap 2.3.2进行了测试:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
.fivecolumns .span2 {
width: 18.297872340425532%;
*width: 18.2234042553191494%;
}
}
@media (min-width: 1200px) {
.fivecolumns .span2 {
width: 17.9487179487179488%;
*width: 17.87424986361156592%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .span2 {
width: 17.79005524861878448%;
*width: 17.7155871635124022%;
}
}
/* end of modification for 5 columns */
</style>

和html:

<div class="row-fluid fivecolumns">
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>

注意:即使span2乘以5不等于12列，你明白了吧:)

可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/

小开

下面是@machineaddict和@Mafnah回答的组合，为Bootstrap 3重写(到目前为止对我来说很好):

@media (min-width: 768px){
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
width: 20%;
*width: 20%;
}
}
@media (min-width: 1200px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}

小开

对于引导3，如果你想要宽屏并且正在使用LESS， SASS或类似的东西，你所要做的就是使用Bootstrap的mixin函数 make-md-column， make-sm-column等。

少:

.col-lg-2-4{
.make-lg-column(2.4)
}
.col-md-2-4{
.make-md-column(2.4)
}
.col-sm-2-4{
.make-sm-column(2.4)
}

萨斯:

.col-lg-2-4{
@include make-lg-column(2.4)
}
.col-md-2-4{
@include make-md-column(2.4)
}
.col-sm-2-4{
@include make-sm-column(2.4)
}

你不仅可以使用这些mixin构建真正的全宽引导列类，还可以构建所有的相关的helper类，如.col-md-push-*、.col-md-pull-*和.col-md-offset-*:

少:

.col-md-push-2-4{
.make-md-column-push(2.4)
}
.col-md-pull-2-4{
.make-md-column-pull(2.4)
}
.col-md-offset-2-4{
.make-md-column-offset(2.4)
}

萨斯:

.col-md-push-2-4{
@include make-md-column-push(2.4)
}
.col-md-pull-2-4{
@include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
@include make-md-column-offset(2.4)
}

其他答案谈到设置@gridColumns，这是完全有效的，但这改变了所有引导的核心列宽度。使用上述mixin函数将在默认的引导列之上添加5列布局，因此它不会破坏任何第三方工具或现有样式。

小开

它可以通过嵌套和使用一点css覆盖来完成。

<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><!-- end inner row -->
</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><!-- end inner row -->
</div>
</div><!-- end outer row -->

然后是css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}


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

｝

下面是一个例子:5等列示例

这是我写的关于代码墙的全部内容

bootstrap 3中5个相等的列

小开

用于引导4

Bootstrap 4现在默认使用flexbox，所以你可以直接使用它的神奇力量。查看自动布局列，它根据嵌套的列的数量动态调整宽度。

这里有一个例子:

<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>

WORKING DEMO

引导3

一个奇妙的全宽 5列布局与Twitter Bootstrap创建在这里。

这是迄今为止最先进的解决方案，因为它与Bootstrap 3无缝地工作。它允许您一遍又一遍地重用这些类，并与当前的Bootstrap类一起用于响应式设计。

< p > CSS:
将此添加到全局样式表中，甚至添加到bootstrap.css文档的底部

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


.col-xs-5ths {
width: 20%;
float: left;
}


@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}


@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}


@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

例如，如果你想创建一个div元素，它在中型屏幕上表现为五列布局，而在较小的屏幕上表现为两列布局，你只需要使用这样的东西:

<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>

< >强工作演示< / >强 -扩展框架以查看列变得响应。

< >强另一个演示< / >强——将新的col-*-5ths类与其他类(如col-*-3和col-*-2)合并。调整帧的大小以在响应视图中看到它们都改变为col-xs-6。

小开

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

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

小开

在我看来，使用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 */

小开

.col-xs-2-4 {
position: relative;
float: left;
width: 20%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-sm-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.col-sm-2-4 {
float: left;
width: 20%;
}
}
.col-md-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
.col-md-2-4 {
float: left;
width: 20%;
}
}
.col-lg-2-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 1200px) {
.col-lg-2-4 {
float: left;
width: 20%;
}
}

小开

对于twitter bootstrap 3，这是最简单的方法来实现这一点:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">

小开

var cols = $(".container .item").length;
if (cols == 5){
$('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
}

Jquery和完成!框架!

小开

如果你不需要确切的相同宽度的列，你可以尝试使用嵌套创建5列:

<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>

jsfiddle

前两列的宽度为5/12 * 1/2 ~ 20.83%

后三列:7/12 * 1/3 ~ 19.44%

这样的hack在许多情况下给出了可接受的结果，不需要任何CSS更改(我们只使用本机引导类)。

小开

这太棒了:http://www.ianmccullough.net/5-column-bootstrap-layout/

只做:

<div class="col-xs-2 col-xs-15">

和CSS:

.col-xs-15{
width:20%;
}

小开

在bootstrap 3中，我认为我们可以这样做，删除左右边距:

<div class="row this_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>

和CSS

.this_row {
margin: 0 -5%;
}

小开

对于@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%…分别

小开

如何在引导中添加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>

小开

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

超文本标记语言

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

小开

使用flexbox http://output.jsbin.com/juziwu

.flexrow {
display: flex;
background: lightgray; /*for debug*/
}
.flexrow > * {
flex: 1;
margin: 1em;
outline: auto green;
}

<div class="flexrow">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...<br>..</div>
<div>...</div>
</div>

小开

默认情况下，Bootstrap不提供允许我们创建五列布局的网格系统，您需要按照Bootstrap的方式创建默认列定义在CSS文件

中创建一些自定义类和媒体查询

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

还有一些HTML代码

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

小开

您可以使用小技巧，使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/

小开

Bootstrap默认可以缩放到12列?这意味着如果我们想要创建一个宽度相同的12列布局，我们将在div class="col-md-1"中写入12次。

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

小开

不需要编辑CSS的最简单的解决方案是:

<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>

如果你需要这些打破任何断点，只要使btn-group块。希望这能帮助到一些人。

小开

五列显然不是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%以上的用例——所以让我们以这种方式设计——也更容易开发!< / p >

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

小开

创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1

附注:这将不是全宽度的(它将从屏幕的左右略微缩进)

代码应该看起来像这样

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

小开

我已经为任意数量的列创建了基于bootstrap定义的SASS mixin定义(个人而言，除了12列，我使用8、10和24列):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.


@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
}
#{$list} {
position: relative;
min-height: 1px;
padding-left:  ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}




@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
@for $i from (1 + 1) through $num-columns {
$list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
}
#{$list} {
float: left;
}
}




@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index}-#{$num-columns} {
width: percentage(($index / $num-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index}-#{$num-columns} {
left: percentage(($index / $num-columns));
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index}-#{$num-columns} {
right: percentage(($index / $num-columns));
}
}
@if ($type == offset) and ($index > 0) {
.col-#{$class}-offset-#{$index}-#{$num-columns} {
margin-left: percentage(($index / $num-columns));
}
}
}


@mixin loop-extended-grid-columns($num-columns, $class, $type) {
@for $i from 1 through $num-columns - 1 {
@include calc-extended-grid-column($i, $num-columns, $class, $type);
}
}


@mixin make-extended-grid($class, $num-columns) {
@include float-extended-grid-columns($class, $num-columns);
@include loop-extended-grid-columns($num-columns, $class, width);
@include loop-extended-grid-columns($num-columns, $class, pull);
@include loop-extended-grid-columns($num-columns, $class, push);
@include loop-extended-grid-columns($num-columns, $class, offset);
}

你可以简单地创建类:

$possible-number-extended-grid-columns: 8, 10, 24;


@each $num-columns in $possible-number-extended-grid-columns {


// Columns


@include make-extended-grid-columns($num-columns);


// Extra small grid


@include make-extended-grid(xs, $num-columns);


// Small grid


@media (min-width: $screen-sm-min) {
@include make-extended-grid(sm, $num-columns);
}


// Medium grid


@media (min-width: $screen-md-min) {
@include make-extended-grid(md, $num-columns);
}


// Large grid


@media (min-width: $screen-lg-min) {
@include make-extended-grid(lg, $num-columns);
}


}

我希望有人会觉得它有用

小开

5列布局与Twitter引导样式

.col-xs-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 100%; float: left; } @media (min-width: 768px) { .col-xs-15 { width: 50%; float: left; } } @media (min-width: 992px) { .col-xs-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-xs-15 { width: 20%; float: left; } }

小开

Bootstrap或其他网格系统并不总是意味着更简单更好。在你的.container或.row(保持你的响应式布局)你可以创建5个div(类.col f.e.)，并添加css如下:
<代码>。{上校宽度:20%; 浮:左 }; < /代码> < / p >
更新:现在最好使用flexbox

小开

更新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中，每5列使用<div class="col-12"></div>或<div class="w-100"></div>这样的换行符。

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

小开

一个解决方案，不需要大量的CSS，也不调整bootstrap默认12col布局:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch"> <div class="col-lg-2"></div> <div class="col-lg-2"></div> <div class="col-lg-2"></div> <div class="col-lg-2"></div> <div class="col-lg-2"></div> </div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/ .stretch{ width: 120%; /*the actual trick*/ } }

小开

只需创建一个新类，并根据需要定义每个媒体查询的行为

@media(min-width: 768px){ .col-1-5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } } <div class="container-fluid"> <div class="row"> <div class="col-1-5">col 1</div> <div class="col-1-5">col 2</div> <div class="col-1-5">col 3</div> <div class="col-1-5">col 4</div> <div class="col-1-5">col 5</div> </div> </div>

这是一个工作演示https://codepen.io/giorgosk/pen/BRVorW

小开

引导4，每行可变列数

如果你想让到每行有5个列，这样每一行的列数仍然只占一行的1/5，解决方案是使用Bootstrap 4的mixin:

SCSS:

.col-2-4 { @include make-col-ready(); // apply standard column margins, padding, etc. @include make-col(2.4); // 12/5 = 2.4 } .col-sm-2-4 { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(2.4); } } .col-md-2-4 { @include make-col-ready(); @include media-breakpoint-up(md) { @include make-col(2.4); } } .col-lg-2-4 { @include make-col-ready(); @include media-breakpoint-up(lg) { @include make-col(2.4); } } .col-xl-2-4 { @include make-col-ready(); @include media-breakpoint-up(xl) { @include make-col(2.4); } }

HTML:

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

小开

有人使用bootstrap-sass (v3)，下面是使用bootstrap混合的5列的简单代码:

.col-xs-5ths { @include make-xs-column(2.4); } @media (min-width: $screen-sm-min) { .col-sm-5ths { @include make-sm-column(2.4); } } @media (min-width: $screen-md-min) { .col-md-5ths { @include make-md-column(2.4); } } @media (min-width: $screen-lg-min) { .col-lg-5ths { @include make-lg-column(2.4); } }

确保你已经包括:

@import "bootstrap/variables"; @import "bootstrap/mixins";

小开

.col-half-offset{ margin-left:4.166666667% !important; float: left; } <div className="row1 marginTop20"> <div className="col-xs-12 col-sm-2 col-md-2"> 1 </div> <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset"> 2 </div> <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset"> 3 </div> <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset"> 4 </div> <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset"> 5 </div> <div className="clearfix"></div> </div>

小开

我更喜欢的解决这个问题的方法是利用现有的基于make-grid-columns mixin的Bootstrap变量创建一个SASS mixin。

// Custom Grid Columns // // $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..." // $size - determines the width (2.4 is one fifth of 12, the default number of columns) @mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) { $columns: round($grid-columns / $size); %custom-grid-column { @include make-col-ready(); } @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); .col#{$infix}-#{$name} { @extend %custom-grid-column; } @include media-breakpoint-up($breakpoint, $breakpoints) { // Create column .col#{$infix}-#{$name} { @include make-col($size); } // Create offset @if not ($infix=="") { .offset#{$infix}-#{$name} { @include make-col-offset($size); } } } } }

然后可以调用mixin来生成自定义列类和偏移量类。

@include custom-grid-columns('5ths', 2.4);

小开

在bootstrap v4.3.1中，它是一个12 / 5 = 2.4列宽的列。我们称它为col-2dot4(以及col-sm-2dot4, col-md-2dot4，…)

每一列应该有20%的可用空间。

SCSS代码如下所示:

@mixin make-5-grid-column($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { // Common properties for all breakpoints %grid-column { position: relative; width: 100%; padding-right: $gutter / 2; padding-left: $gutter / 2; } @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); .col#{$infix}-2dot4 { @extend %grid-column; } .col#{$infix}, .col#{$infix}-auto { @extend %grid-column; } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col#{$infix}-auto { flex: 0 0 auto; width: auto; max-width: 100%; // Reset earlier grid tiers } .col#{$infix}-2dot4 { @include make-col(1, 5); } } } } @if $enable-grid-classes { @include make-5-grid-column(); }

小开

引导4

我看了所有的答案，没有找到“显而易见的答案”。基本上，你需要做的是取任何引导列(例如col-2)并编辑一些值。在这个例子中，我使用了.col-custom类。

五列相等意味着每一列都占用20%，因此:flex:0 0 20%和max-width:20%。同样的方法，你可以创建其他数量的列(7,9,11,84或任何你想要的)。

您可以创建自定义宽度的CSS变量，并在项目中使用它。就像这样:

:root { --col-custom: 20%; } .col-custom { flex: 0 0 var(--col-custom); max-width: var(--col-custom); }

工作的例子:

.col-custom, .col-sm-custom, .col-md-custom, .col-lg-custom, .col-xl-custom { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col-custom { flex: 0 0 20%; max-width: 20%; } @media (min-width: 576px){ .col-sm-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 768px){ .col-md-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 992px){ .col-lg-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 1200px){ .col-xl-custom { flex: 0 0 20%; max-width: 20%; } } /*DEMO*/ .col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-custom{height:100px;border:1px red solid}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> </div> </div>

小开

用于引导4.4+

使用全新的row-cols-n类。

将row-cols-5类添加到.row div中。不需要自定义CSS。

关于row-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns，请参阅4.4文档

对于引导4.4之前的引导4版本

复制下面的CSS (Bootstrap作者的很棒的CSS)并将其添加到您的项目中

阅读上面引用的文档以正确使用它。

.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}} < / p >

小开

Boostrap今天提供了用内置类均匀填充一行的可能性，这些内置类不告诉十二列中有多少列要跨度:

你可以使用col/col-xx:

div div div { border: solid; margin: 2px;/* this can be added without breaking the row */ } div div div:before { content:attr(class);/* show class used */ color:crimson

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <p>Class used , play snippet in full page to test behavior on resizing :</p> <div class="container"> <div class="row"> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> </div> <div class="row"> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div>

Flex-grow-x也可以使用

div div div { border: solid; /* it allows margins too */ margin: 3px; } div div div:before { content: attr(class); /* show class used */ color: crimson }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> </div> </div>

小开

最简单的方法是在行中添加row-cols-5。在这里阅读更多

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row row-cols-5"> <div class="col border bg-primary">Col 1</div> <div class="col border bg-primary">Col 2</div> <div class="col border bg-primary">Col 3</div> <div class="col border bg-primary">Col 4</div> <div class="col border bg-primary">Col 5</div> <div class="col border bg-primary">Col 6</div> <div class="col border bg-primary">Col 7</div> </div> </div>

小开

最好的方法

只在行中添加.row-cols-5类。每一行有5个div。

<div class="container-fluid"> <div class="row row-cols-5"> <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 class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> </div> </div>

使用响应式.row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于单个列(例如，.col-md-4)，而行列类在父.row上设置为快捷方式。

row-cols - *

row-cols-sm - *

row-cols-md - *

row-cols-lg - *

row-cols-xl - *

你也可以使用附带的Sass mixin, row-cols():

.element { // Three columns to start @include row-cols(3); // Five columns from medium breakpoint up @include media-breakpoint-up(md) { @include row-cols(5); } }

小开

如果使用bootstrap 4和SASS (+ bootstrap变量)，您可以使用以下简化的答案:

@each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .col#{$infix}-fifth { @extend %grid-column; } @include media-breakpoint-up($breakpoint, $grid-breakpoints) { .col#{$infix}-fifth { flex: 0 0 20%; max-width: 20%; } } }

也支持断点，你可以简单地添加新的.col#{$infix}-xxx类

小开

用于引导5或更高版本

你可以使用row-cols-类名。

例如:row-cols-1， row-cols-5， row-cols-lg-5

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

有关更多信息，请阅读官方文档

小开

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

那么如何创建一个类来扩展我们的引导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>

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

小开

创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1

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

附注:这将不是全宽度(它将从屏幕的左右稍微缩进)。

代码应该看起来像这样。

提交答案