在twitter引导五个相等的列
我想在我正在构build的页面上有5个相同的列，我似乎无法理解5列的网格在这里如何使用： http : //web.archive.org/web/20120416024539/http : //domain7 .COM /移动/工具/引导/响应
五列网格被演示以上twitter引导框架的一部分？
使用5个具有span2类的div，并给第一个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> 瞧！ 五个等距并居中的列。
在bootstrap 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 3及更高版本
这里创build了一个具有Twitter Bootstrap的奇妙的全宽度 5列布局。
这是迄今为止最先进的解决scheme，因为它可以与Bootstrap 3无缝协作。它允许您重复使用这些类，并与当前的Bootstrap类一起用于响应式devise。
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; } }
把它使用！
例如，如果要创build一个在中等屏幕上行为类似于五列布局的div元素，而在较小的列上创build两列，则只需使用如下所示的内容：
<div class="row"> <div class="col-md-5ths col-xs-6"> ... </div> </div>
工作演示 – 展开框架以查看列成为响应。
另一个演示 – 将新的col-*-5ths类与col-*-3和col-*-2结合在一起。 在响应式视图中调整帧大小以查看它们全部变为col-xs-6 。
对于Bootstrap 4
Bootstrap 4现在默认使用flexbox，所以你可以直接使用它的魔法力量。 查看dynamic调整宽度的自动布局列 ，具体取决于嵌套的列数。
这是一个例子：
<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>
工作演示
对Bootstrap 3来说 ，如果你想要全angular并使用LESS ， SASS或类似的东西，那么你所要做的就是利用Bootstrap的混合函数 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) }
您不仅可以使用这些混合构build真正的全宽引导列类 ，还可以构build所有相关的帮助类，如.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列布局，所以它不会破坏任何第三方工具或现有的样式。
下面是@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%; } }
保留12列的原始引导，不要定制它。 你需要做的唯一的修改是在原始的引导响应CSS 后的一些CSS，像这样：
以下代码已经针对Bootstrap 2.3.2进行了testing：
<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 »</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 »</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 »</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 »</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 »</a></p> </div> </div>
注意：即使span2乘以5不等于12列，你也会明白:)
一个工作的例子可以在这里findhttp://jsfiddle.net/v3Uy5/6/
为5列布局创build一个自定义Bootstrap下载
转到Bootstrap 2.3.2 （或Bootstrap 3 ）自定义页面并设置以下variables（不要input分号）：
@gridColumns: 5; @gridColumnWidth: 172px; @gridColumnWidth1200: 210px; @gridColumnWidth768: 128px; @gridGutterWidth768: 21px;
下载你的构build。 这个网格将适合默认容器，保留默认的排水沟宽度（几乎）。
注意：如果您正在使用LESS，请改为更新variables.less 。
如果你不需要完全相同的列宽，你可以尝试使用嵌套来创build5列：
<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％
这种攻击在许多情况下都能提供可接受的结果，并且不需要任何CSS更改（我们只使用本地引导类）。
我投票了Mafnah的答案，但再次看到这个我build议如果你保持默认的利润率，以下更好等。
<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%; }
用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 4 ..
这是使用自动布局网格的 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://www.codeply.com/go/MJTglTsq9h
这个解决scheme是可行的，因为Bootstrap 4现在是flexbox。 您可以使用clearfix中断（例如<div class="col-12"></div>或<div class="w-100"></div>将5个colums打包成相同的.row列。
<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%; }
用类col-sm-2创build5个元素，并添加到第一个元素col-sm-offset-1
Ps不会是全宽（它会从屏幕的左右两侧缩进一点）
代码应该看起来像这样
<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>
它可以嵌套和使用一个小小的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等于列的例子
这里是我写在coderwall上
引导程序中的5个相同的列3
在Bootstrap 3中启用5列的另一种方法是修改Bootstrap默认使用的12列格式。 然后创build一个20列网格（在Bootstrap网站上使用自定义或使用LESS / SASS版本）。
要在引导程序网站上自定义 ，请转至“ 自定义和下载”页面，将variables@grid-columns从12更新为20 。 那么你将能够创build4列和5列。
在我看来，最好是less用这样的语法。 这个答案是基于@fizzix的答案
这种方式列使用用户可能会覆盖的variables（@ grid-gutter-width，媒体断点），五列的行为与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 */
这真棒： http : //www.ianmccullough.net/5-column-bootstrap-layout/
做就是了：
<div class="col-xs-2 col-xs-15">
和CSS：
.col-xs-15{ width:20%; }
默认情况下，Bootstrap不提供允许我们创build五列布局的网格系统，您需要以Bootstrap在您的css文件中创build一些自定义类和媒体查询的方式创build默认列定义
.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>
在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%; }
如何在引导中添加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>
Bootstrap默认可以扩展到12列？ 这意味着如果我们想要创build一个宽度相等的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>
最简单的解决scheme，无需编辑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组块。 希望这有助于某人。
五列显然不是由devise引导的部分。
但是使用Bootstrap v4（alpha），有两件事情可以帮助复杂的网格布局
- Flex（ http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ），新的元素types（官方 – 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>
不pipe是5,7,9,11,13还是什么可能性，都可以。 我相当肯定，12格标准能够服务超过90％的用例 – 所以让我们这样devise吧 – 开发更容易！
漂亮的flex教程在这里“ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ”
Twitter Bootstrap风格的5列布局
.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; } }
一个不需要大量CSS的解决scheme，也不需要调整引导默认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*/ } }
.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引导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%;">
@ lightswitch的答案即兴，如果我们需要5列网格使用LESS迭代
.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);
这将生成分别对应于10% ， 20% ， 30% …的css类.col-md-5th-1, col-md-5th-2, col-md-5th-3, …
（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; }
你可以使用小技巧来制作具有偏移解决scheme全angular的col-md-2。 它使用引导程序去除（隐藏）15px填充的方式。
我的意思是加上“ – ”边距。 其实计算（-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/
我已经创build了SASS mixin的定义，它基于任意列数的引导定义（我个人使用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); }
你可以简单地创build类：
$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); } }
我希望有人会觉得有用
