7.Bootstrap(中文教程)网格系统：响应式布局

ㄧ.响应式布局

<div id="demo" class="container">  <div class="row">    <div class="col-12 col-sm-6 col-lg-3"><span>1</span></div>    <div class="col-12 col-sm-6 col-lg-3"><span>2</span></div>    <div class="col-12 col-sm-6 col-lg-3"><span>3</span></div>    <div class="col-12 col-sm-6 col-lg-3"><span>4</span></div>  </div></div>#demo.container{  background: #054db1;  color: white;  height: 100vh;}#demo.container .row{  background: #021d51;  border-bottom: 1px solid #000;  height: 30vh;}#demo.container .row > .col-12 > span,#demo.container .row > .col-sm-6 > span,#demo.container .row > .col-lg-3 > span{  display: block;  background: #487dbb;  color: white;  font-size: 32px;  padding: 8px;  border: 1px solid #021d51;}

重点：
1.在手机的萤幕row里面的col为12格，平板萤幕为6格，电脑萤幕为3格
2.col各个萤幕的尺寸
.col为最小萤幕通常为手机萤幕，也就是<576px
.col-sm为小萤幕为平板萤幕，也就是 ≥576px
.col-md为中萤幕的大平板，≥992px
.col-lg为大萤幕的电脑，也就是 ≥992px
.col-xl为超大萤幕的电脑，≥1200px

codepen
参考：bootstrap4