我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
最好的方法
只在行中添加.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);
}
}
其他回答
保持原始的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 »</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列,你明白了吧:)
可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/
您可以使用小技巧,使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/
这个很棒:http://www.ianmccullough.net/5-column-bootstrap-layout/
只做:
<div class="col-xs-2 col-xs-15">
和CSS:
.col-xs-15{
width:20%;
}
对于@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%…分别
<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%;
}