001 栅格布局

最新推荐文章于 2023-05-31 14:43:36 发布

nine-seven

最新推荐文章于 2023-05-31 14:43:36 发布

阅读量198

点赞数

分类专栏：移动WEB开发

本文链接：https://blog.csdn.net/Twelve_Y/article/details/119008489

版权

移动WEB开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

栅格布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>Document</title>
    <style>
        .zdy-h-370 {
            height: 370px;
        }
        .zdy-h-230 {
            height: 230px;
        }
        /* @media (min-width:576px){
            .zdy-h-teshu {
                height: 370px;
            }
        }
       @media (min-width:992px) {
        .zdy-h-teshu {
                height: 230px;
            }
       } */

       /* 不能光考虑PC 还要考虑sm的时候黄色会下去，列1会填满整行，因此给列1去内边距不合适（媒体查询必须写） */
       /* min-width: 576px 是sm以上 */
        @media (min-width:576px) {
            /* 缩小时左右内外边距都为0 */
            .xz-sg>div:nth-child(1) {
                padding-right: 0;
                padding-left: 0;
            }
        }
        /* min-width: 992px  是lg以上的范围 */
        @media (min-width:992px) {
            /* 找到自定义行的第一列就是哟啊修饰的蓝色第一列 */
            /* 放大是，只有左内边距为0 */
            .xz-sg>div:nth-child(1) {
                padding-left: 0;
                /* sm去掉了右外边距  */
                padding-right: 15px;
            }
        }

    </style>
</head>

<body>

    <div class="container">
        <div class="row xz-sg">
            <!-- 第一列 -->
            <div class="col-lg-7 col-sm-12 bg-danger zdy-h-370">
                <div class="w-100 h-100 bg-white"></div>
            </div>
            <!-- 第二列  在sm的时候高度是自动 他依据的是同行列的高度 但自动终究是靠依靠方影响的（自主性差，可调整性低，如需自定义效果更佳，可使用媒体查询单独为这行的两个元素重新改高度）-->
            <div class="col-lg-5 col-sm-7 bg-dark zdy-h-teshu"></div>
            <!-- 第三列  sm的时候高度是以23o高度为主 -->
            <div class="col-lg-5 col-sm-5 bg-info zdy-h-230"></div>
            <!-- 第四列 -->
            <div class="col-lg-7 bg-primary col-sm-12">
                <div class="row">
                    <div class="col-lg-4 col-sm-4 zdy-h-230 bg-warning"></div>
                    <div class="col-lg-4 col-sm-4 zdy-h-230 bg-secondary"></div>
                    <div class="col-lg-4 col-sm-4 zdy-h-230 bg-success"></div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

nine-seven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001 栅格布局

栅格布局<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/bootstrap.css"> <script src="./js/jqu
复制链接

扫一扫