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>

 

按照以上的方法,我们可以很容易的创造出更多栏出来!

 

更多参考:

Bootstrap 3 响应式上传图片,时间拾取器和表单认证 Bootstrap 3 Fileinput, Bootstrap 3 Date/Time Picker – Datepicker, Bootstrap 3 Validator

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

Leave a Reply