仿bootstrap的栅格系统支持移动端和 pc 端

最新推荐文章于 2024-05-08 09:47:06 发布

我不是小梅子

最新推荐文章于 2024-05-08 09:47:06 发布

阅读量786

点赞数

分类专栏：新手

本文链接：https://blog.csdn.net/weixin_45759895/article/details/103212345

版权

该博客介绍了如何创建一个类似Bootstrap的栅格系统，支持移动端和PC端布局。内容包括使用.col类进行横向布局，通过.row容器均匀划分12份空间，并详细说明了不同屏幕尺寸下的.col-xs-xx, .col-sm-xx, .col-md-xx, .col-lg-xx类的使用，以及如何精确到小数点后7位的百分比分配栅格宽度。" 78982146,7356068,编程实现购房贷款计算器,"['编程', '贷款计算', '算法设计', '金融计算', '软件开发']

摘要由CSDN通过智能技术生成

栅格系统 .col

栅格系统是横向布局的处理
提示如果父容器：不使用.row 那么自己清除浮动计算父容器高度

容器 .row

将.row 容器等分为 12 份

屏幕

.col-xs-xx < 768 屏幕尺寸

.col-sm-xx >=768 >992 屏幕尺寸

.col-md-xx >=992 >1200 屏幕尺寸

.col-lg-xx >=1200 屏幕尺寸

分的份数确定到小数点后 7位

1- 8.3333333%
2- 16.6666667%
3- 25%
4- 33.3333333%
5- 41.6666667%
6- 50%
7- 58.3333333%
8- 66.6666667%
9- 75%
10- 83.3333333%
11- 91.6666667%
12- 100%

复制以下代码可用

/* 将所有使用栅格系统的元素变成 inline-block  */

.row:after{
   
  content: '';
  display: table;
  clear: both;
}

.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{
   
  float: left;
}

.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,
.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,
.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,
.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{
   
  float: left;
  position: relative;
  min-height: 1px;
}




/* 超级小屏幕 xs */

.col-xs-1{
   
  width: 8.3333333%;
}
.col-xs-2{
   
  width: 16.6666667%;<