我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
在我看来,像这样使用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 */
其他回答
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS,更新变量。而不是更少。
创建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>
我对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%;
}
不需要编辑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%以上的用例——所以让我们以这种方式设计——也更容易开发!
flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”