网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
复杂应用
在bootstrap中，.col-xs-应用于(<768px)的情况，.col-sm-应用于(≥768px and <992px)的情况，.col-md-应用于(≥992px and <1200px)的情况，.col-lg-应用于(≥1200px)的情况
而.col-xs-、.col-sm-、.col-md-、.col-lg-是可以用混合使用的
比如，要实现≥992px的时候分四列一排，(≥768px and <992px)的时候两列一排，(<768px)的时候一列一排
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
.row div{border:1px solid black;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6">aaa</div>
<div class="col-md-3 col-sm-6">bbb</div>
<div class="col-md-3 col-sm-6">ccc</div>
<div class="col-md-3 col-sm-6">ddd</div>
</div>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8333.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知