我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
下面是@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%;
}
}
其他回答
五列显然不是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/”
只需创建一个新类,并根据需要定义每个媒体查询的行为
@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
<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中,我认为我们可以这样做,删除左右边距:
<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%;
}
它可以通过嵌套和使用一点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个相等的列