CSS之自定义栅格系统

最新推荐文章于 2024-05-31 18:59:29 发布

___Alive___

最新推荐文章于 2024-05-31 18:59:29 发布

阅读量1.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/YU_M_K/article/details/81698735

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1：一些规范

.col-xs-* 超小屏幕手机 (<768px)

.col-sm-* 小屏幕平板 (≥768px)

.col-md-* 中等屏幕桌面显示器 (≥992px)

.col-lg-* 大屏幕大桌面显示器 (≥1200px)

2：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义栅格系统</title>
    <style>
        .container{
            width: 100%;
        }
        .row{
            width: 100%;
        }
        /*中等屏幕*/
        .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6{
            float: left;
        }
        /*小屏幕*/
        .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6{
            float: left;
        }

        /*小屏幕*/
        .col-sm-1{
            width: 16.6666666666%;
        }
        .col-sm-2{
            width: 33.3333333332%;
        }
        .col-sm-3{
            width: 49.9999999998%;
        }
        .col-sm-4{
            width: 66.6666666664%;
        }
        .col-sm-5{
            width: 83.3333333333%;
        }
        .col-sm-6{
            width: 100%;
        }

        /*中等屏幕*/
        @media (min-width: 768px) {
            .col-md-1{
                width: 16.6666666666%;
            }
            .col-md-2{
                width: 33.3333333332%;
            }
            .col-md-3{
                width: 49.9999999998%;
            }
            .col-md-4{
                width: 66.6666666664%;
            }
            .col-md-5{
                width: 83.3333333333%;
            }
            .col-md-6{
                width: 100%;
            }
        }

    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-1">col-md-3</div>
        <div class="col-md-3 col-sm-5">col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-1">col-md-2</div>
        <div class="col-md-2 col-sm-2">col-md-2</div>
        <div class="col-md-2 col-sm-3">col-md-2</div>
    </div>
</div>


</body>
</html>

3：效果

1：中屏幕

2：小屏幕

___Alive___

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之自定义栅格系统

1：一些规范.col-xs-* 超小屏幕手机 (&lt;768px).col-sm-* 小屏幕平板 (≥768px).col-md-* 中等屏幕桌面显示器 (≥992px).col-lg-* 大屏幕大桌面显示器 (≥1200px)2：代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫