bootstrap4 网格布局实例_BootStrap栅格布局

String path = request.getContextPath();

%>

栅格

.show-grid [class ^="col-"] {

padding-top: 10px;

padding-bottom: 10px;

background-color: #eee;

border: 1px solid #ddd;

background-color: rgba(86, 61, 124, .15);

border: 1px solid rgba(86, 61, 124, .2);

}

$(function(){

});

col-lg-*用法

.col-lg-8

.col-lg-4

col-md-*用法

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

col-sm-*用法

.col-sm-8

.col-sm-4

col-xs-*用法

.col-xs-8

.col-xs-4

列偏移: col-md-offset-*

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

嵌套列: 嵌套row所包含的列加起来应该等于12

Level 1: .col-md-9

Level 2: .col-md-6

Level 2: .col-md-6

列排序: .col-md-push-*和.col-md-pull-*

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9