目录[-] （1）javascript 数组 （2）函数基础 （3）运算符 （4）流程语句 （5）正则表达式 （6）字符串函数 （7）数据类型…
May 4, 2016
Bootstrap 3 : 实现5栏设计 5 columns layout with Twitter Bootstrap
创建css样式，我们暂且叫他 col-**-15
.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;
}
}
ok， 你现在可以直接使用他们了，例如：
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
按照以上的方法，我们可以很容易的创造出更多栏出来！
更多参考:
jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
Bootstrap 3: 图标转换事件 Change icons when toggle
Bootstrap 3 input spinner 数字增减框
本文： Bootstrap 3 : 实现5栏设计 5 columns layout with Twitter Bootstrap
Related Posts
About Author
