<body>
<div class="container">
<div class="row">
<div class=" col-xs-6 col-sm-4">col-xs-4</div>
<div class=" col-xs-6 col-sm-4">col-xs-4</div>
<div class=" col-xs-12 col-sm-4">col-xs-4</div>
</div>
<div class="row">
<div class=" col-xs-3 col-sm-3">col-xs-3</div>
<div class=" col-xs-6 col-sm-6">col-xs-6</div>
<div class=" col-xs-3 col-sm-3">col-xs-3</div>
</div>
<div class="row">
<div class=" col-xs-2 col-sm-1">col-xs-1</div>
<div class=" col-xs-2 col-sm-1">col-xs-1</div>
<div class=" col-xs-8 col-sm-2">col-xs-2</div>
<div class=" col-xs-3 col-sm-2">col-xs-2</div>
<div class=" col-xs-3 col-sm-6">col-xs-6</div>
</div>
</div>
</body>
.container{
padding: 20px;
border: 1px solid #999;
margin: 20px;
}
.container:before,
.container:after{
content: "";
display: table;
height: 1px;
}
.container:after{
clear: both;
}
.row{
margin-right: -20px;
}
[class*="col-"]{
float: left;
height: 48px;
margin-top: 20px;
margin-right: 20px;
border: 1px solid #999;
background: #eee;
box-sizing: border-box;
}
.row:first-of-type{
margin-top: -20px;
}
.col-xs-12 {
width: calc(100% - 20px);
}
.col-xs-11 {
width: calc(91.66666667% - 20px);
}
.col-xs-10 {
width: calc(83.33333333% - 20px);
}
.col-xs-9 {
width: calc(75% - 20px);
}
.col-xs-8 {
width: calc(66.66666667% - 20px);
}
.col-xs-7 {
width: calc(58.33333333% - 20px);
}
.col-xs-6 {
width: calc(50% - 20px);
}
.col-xs-5 {
width: calc(41.66666667% - 20px);
}
.col-xs-4 {
width: calc(33.33333333% - 20px);
}
.col-xs-3 {
width: calc(25% - 20px);
}
.col-xs-2 {
width: calc(16.66666667% - 20px);
}
.col-xs-1 {
width: calc(8.33333333% - 20px);
}
@media all and (min-width: 768px) {
.col-sm-12 {
width: calc(100% - 20px);
}
.col-sm-11 {
width: calc(91.66666667% - 20px);
}
.col-sm-10 {
width: calc(83.33333333% - 20px);
}
.col-sm-9 {
width: calc(75% - 20px);
}
.col-sm-8 {
width: calc(66.66666667% - 20px);
}
.col-sm-7 {
width: calc(58.33333333% - 20px);
}
.col-sm-6 {
width: calc(50% - 20px);
}
.col-sm-5 {
width: calc(41.66666667% - 20px);
}
.col-sm-4 {
width: calc(33.33333333% - 20px);
}
.col-sm-3 {
width: calc(25% - 20px);
}
.col-sm-2 {
width: calc(16.66666667% - 20px);
}
.col-sm-1 {
width: calc(8.33333333% - 20px);
}
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
