2022-04-18 栅格组件，实现简单的导航出现隐藏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>练习</title>
        <link rel="stylesheet" href="../grid.css" />
    </head>
    <style>
        h2 {
            background: rgb(85, 155, 96);
            color: #fff;
            line-height: 40px;
        }      
        header{
            height:50px;
            line-height: 50px;
            border-bottom:1px solid #f5f5f5;
            position:relative;
        }  
        .navBar1{
            border-radius: 0 100% 0 0 ;
            background:orangered;
            color:white;
            width:50px;
            height:100%;
            position: relative;
        }
        .navBar1::before{
           position: absolute;
           content:'';
           display:block;
           width:20px;
           height:6px;
           border-top:1px solid #fff;
           border-bottom: 1px solid #fff;
           top:50%;
           margin-top:-3px;
           left:50%;
           margin-left:-10px;
        }
        .navBar2{
            width:200px;
            font-weight: bold;
        }
        ul{
            list-style: none;
            padding:0;
            margin:0;
        }
        .navBar2 ul{            
            display:flex;
            justify-content: space-around;
            align-items: center;           
        }
        .img{
            position: absolute;
            left:50%;
            margin-left:-100px;
            top:50%;
            margin-top:-40px;
        }
        #animateNav{
            width:100%;
            background-color:#f5f5f5;
            line-height:30px;            
            transition: height 0.5s ease ;
            height:0;
            overflow: hidden;
        }
        #animateNav li{
            border-bottom:1px solid #fff;
           
        }
        .moveIn{
           /* transform: height;            */
           height:90px !important;
        }
        .moveOut{
           /* transform: translateY(0px); */
           height:0px !important;
           
        }
    </style>
    <body>
        <h2>
            根据效果视频完成下面的布局要求：
            （1）在中屏以上，左侧是导航，中间是图片
            （2）在中屏以下，左侧导航变成按钮，点击按钮导航缓缓下滑
        </h2>
       
        <header class="row">
            <div class="d-sm-show d-md-hidden navBar1">               
            </div>            
            <div class="d-hidden d-sm-hidden d-md-show navBar2">
                <ul>
                    <li>首页</li>
                    <li>关于</li>
                    <li>商业合作</li>
                </ul>
            </div>           
            <div class="img">
                <img src="./logo.png" />
            </div>       
        </header>
        <ul id="animateNav" class="moveOut">
            <li>首页</li>
            <li>关于</li>
            <li>商业合作</li>
        </ul>

        <script>
            const nav=document.querySelector('.navBar1')        
            nav.addEventListener('click',()=>{
               const ul = document.querySelector('#animateNav')                           
               let flag=ul.classList.contains('moveOut')
               ul.classList=flag?['moveIn']:['moveOut']                           
            })
        </script>
    </body>
</html>


/* xs */
.row {
    width: 100%;
}

/* 目的是让它们按顺序排列 */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    float: left;
    position: relative;
}

.col-1 {
    width: calc((1 / 12) * 100%);
}

.col-2 {
    width: calc((2/ 12) * 100%);
}

.col-3 {
    width: calc((3 / 12) * 100%);
}

.col-4 {
    width: calc((4 / 12) * 100%);
}

.col-5 {
    width: calc((5 / 12) * 100%);
}

.col-6 {
    width: calc((6 / 12) * 100%);
}

.col-7 {
    width: calc((7 / 12) * 100%);
}

.col-8 {
    width: calc((8 / 12) * 100%);
}

.col-9 {
    width: calc((9 / 12) * 100%);
}

.col-10 {
    width: calc((10 / 12) * 100%);
}

.col-11 {
    width: calc((11 / 12) * 100%);
}

.col-12 {
    width: 100%;
}

/* 向右推 */
.col-push-0 {
    right: auto;
}

.col-push-1 {
    right: calc((1 / 12) * 100%);
}

.col-push-2 {
    right: calc((2 / 12) * 100%);
}

.col-push-3 {
    right: calc((3 / 12) * 100%);
}

.col-push-4 {
    right: calc((4 / 12) * 100%);
}

.col-push-5 {
    right: calc((5 / 12) * 100%);
}

.col-push-6 {
    right: calc((6 / 12) * 100%);
}

.col-push-7 {
    right: calc((7 / 12) * 100%);
}

.col-push-8 {
    right: calc((8 / 12) * 100%);
}

.col-push-9 {
    right: calc((9 / 12) * 100%);
}

.col-push-10 {
    right: calc((10 / 12) * 100%);
}

.col-push-11 {
    right: calc((11 / 12) * 100%);
}

.col-push-12 {
    right: calc((12 / 12) * 100%);
}

/* 向左推 */
.col-pull-0 {
    right: auto;
}

.col-pull-1 {
    right: calc((1 / 12) * 100%);
}

.col-pull-2 {
    right: calc((2 / 12) * 100%);
}

.col-pull-3 {
    right: calc((3 / 12) * 100%);
}

.col-pull-4 {
    right: calc((4 / 12) * 100%);
}

.col-pull-5 {
    right: calc((5 / 12) * 100%);
}

.col-pull-6 {
    right: calc((6 / 12) * 100%);
}

.col-pull-7 {
    right: calc((7 / 12) * 100%);
}

.col-pull-8 {
    right: calc((8 / 12) * 100%);
}

.col-pull-9 {
    right: calc((9 / 12) * 100%);
}

.col-pull-10 {
    right: calc((10 / 12) * 100%);
}

.col-pull-11 {
    right: calc((11 / 12) * 100%);
}

.col-pull-12 {
    right: calc((12 / 12) * 100%);
}

/* 水平方向的偏移 */
.col-offset-0 {
    margin-left: auto;
}

.col-offset-1 {
    margin-left: calc((1 / 12) * 100%);
}

.col-offset-2 {
    margin-left: calc((2 / 12) * 100%);
}

.col-offset-3 {
    margin-left: calc((3 / 12) * 100%);
}

.col-offset-4 {
    margin-left: calc((4 / 12) * 100%);
}

.col-offset-5 {
    margin-left: calc((5 / 12) * 100%);
}

.col-offset-6 {
    margin-left: calc((6 / 12) * 100%);
}

.col-offset-7 {
    margin-left: calc((7 / 12) * 100%);
}

.col-offset-8 {
    margin-left: calc((8 / 12) * 100%);
}

.col-offset-9 {
    margin-left: calc((9 / 12) * 100%);
}

.col-offset-10 {
    margin-left: calc((10 / 12) * 100%);
}

.col-offset-11 {
    margin-left: calc((11 / 12) * 100%);
}

.col-offset-12 {
    margin-left: calc((12 / 12) * 100%);
}

/* 元素水平方向间隔 */
.col-gutter-0 {
    padding: 0;
}

.col-gutter-1 {
    padding: 0 2px;
}

.col-gutter-2 {
    padding: 0 4px;
}

.col-gutter-3 {
    padding: 0 6px;
}

.col-gutter-4 {
    padding: 0 8px;
}

.col-gutter-5 {
    padding: 0 10px;
}

.col-gutter-6 {
    padding: 0 12px;
}

.col-gutter-7 {
    padding: auto 14px;
}

.col-gutter-8 {
    padding: auto 16px;
}

.col-gutter-9 {
    padding: auto 18px
}

.col-gutter-10 {
    padding: auto 20px;
}

.col-gutter-11 {
    padding: auto 22px;
}

.col-gutter-12 {
    padding: auto 24px;
}

/* 显示/隐藏 */
.d-hidden {
    display: none !important;
}

.d-show {
    display: block !important;
}


/* sm */
@media (min-width:576px) {

    .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 {
        float: left;
        position: relative;
    }

    .col-sm-1 {
        width: calc((1 / 12) * 100%);
    }

    .col-sm-2 {
        width: calc((2/ 12) * 100%);
    }

    .col-sm-3 {
        width: calc((3 / 12) * 100%);
    }

    .col-sm-4 {
        width: calc((4 / 12) * 100%);
    }

    .col-sm-5 {
        width: calc((5 / 12) * 100%);
    }

    .col-sm-6 {
        width: calc((6 / 12) * 100%);
    }

    .col-sm-7 {
        width: calc((7 / 12) * 100%);
    }

    .col-sm-8 {
        width: calc((8 / 12) * 100%);
    }

    .col-sm-9 {
        width: calc((9 / 12) * 100%);
    }

    .col-sm-10 {
        width: calc((10 / 12) * 100%);
    }

    .col-sm-11 {
        width: calc((11 / 12) * 100%);
    }

    .col-sm-12 {
        width: 100%;
    }

    /* 向右推 */
    .col-sm-push-0 {
        right: auto;
    }

    .col-sm-push-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-sm-push-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-sm-push-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-sm-push-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-sm-push-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-sm-push-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-sm-push-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-sm-push-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-sm-push-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-sm-push-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-sm-push-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-sm-push-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 向左推 */
    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-pull-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-sm-pull-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-sm-pull-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-sm-pull-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-sm-pull-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-sm-pull-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-sm-pull-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-sm-pull-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-sm-pull-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-sm-pull-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-sm-pull-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-sm-pull-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 向右的偏移 */
    .col-sm-offset-0 {
        margin-left: auto;
    }

    .col-sm-offset-1 {
        margin-left: calc((1 / 12) * 100%);
    }

    .col-sm-offset-2 {
        margin-left: calc((2 / 12) * 100%);
    }

    .col-sm-offset-3 {
        margin-left: calc((3 / 12) * 100%);
    }

    .col-sm-offset-4 {
        margin-left: calc((4 / 12) * 100%);
    }

    .col-sm-offset-5 {
        margin-left: calc((5 / 12) * 100%);
    }

    .col-sm-offset-6 {
        margin-left: calc((6 / 12) * 100%);
    }

    .col-sm-offset-7 {
        margin-left: calc((7 / 12) * 100%);
    }

    .col-sm-offset-8 {
        margin-left: calc((8 / 12) * 100%);
    }

    .col-sm-offset-9 {
        margin-left: calc((9 / 12) * 100%);
    }

    .col-sm-offset-10 {
        margin-left: calc((10 / 12) * 100%);
    }

    .col-sm-offset-11 {
        margin-left: calc((11 / 12) * 100%);
    }

    .col-sm-offset-12 {
        margin-left: calc((12 / 12) * 100%);
    }

    /* 元素水平方向间隔 */
    .col-sm-gutter-0 {
        padding: 0;
    }

    .col-sm-gutter-1 {
        padding: 0 2px;
    }

    .col-sm-gutter-2 {
        padding: 0 4px;
    }

    .col-sm-gutter-3 {
        padding: 0 6px;
    }

    .col-sm-gutter-4 {
        padding: 0 8px;
    }

    .col-sm-gutter-5 {
        padding: 0 10px;
    }

    .col-sm-gutter-6 {
        padding: 0 12px;
    }

    .col-sm-gutter-7 {
        padding: auto 14px;
    }

    .col-sm-gutter-8 {
        padding: auto 16px;
    }

    .col-sm-gutter-9 {
        padding: auto 18px
    }

    .col-sm-gutter-10 {
        padding: auto 20px;
    }

    .col-sm-gutter-11 {
        padding: auto 22px;
    }

    .col-sm-gutter-12 {
        padding: auto 24px;
    }

    /* 显示/隐藏 */
    .d-sm-hidden {
        display: none !important;
    }

    .d-sm-show {
        display: block !important;
    }
}

/* md */
@media (min-width:768px) {

    .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 {
        float: left;
        position: relative;
    }

    .col-md-1 {
        width: calc((1 / 12) * 100%);
    }

    .col-md-2 {
        width: calc((2/ 12) * 100%);
    }

    .col-md-3 {
        width: calc((3 / 12) * 100%);
    }

    .col-md-4 {
        width: calc((4 / 12) * 100%);
    }

    .col-md-5 {
        width: calc((5 / 12) * 100%);
    }

    .col-md-6 {
        width: calc((6 / 12) * 100%);
    }

    .col-md-7 {
        width: calc((7 / 12) * 100%);
    }

    .col-md-8 {
        width: calc((8 / 12) * 100%);
    }

    .col-md-9 {
        width: calc((9 / 12) * 100%);
    }

    .col-md-10 {
        width: calc((10 / 12) * 100%);
    }

    .col-md-11 {
        width: calc((11 / 12) * 100%);
    }

    .col-md-12 {
        width: 100%;
    }

    /* 向右推 */
    .col-md-push-0 {
        right: auto;
    }

    .col-md-push-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-md-push-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-md-push-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-md-push-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-md-push-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-md-push-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-md-push-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-md-push-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-md-push-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-md-push-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-md-push-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-md-push-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 向左推 */
    .col-md-pull-0 {
        right: auto;
    }

    .col-md-pull-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-md-pull-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-md-pull-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-md-pull-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-md-pull-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-md-pull-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-md-pull-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-md-pull-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-md-pull-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-md-pull-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-md-pull-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-md-pull-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 水平方向的偏移 */
    .col-md-offset-0 {
        margin-left: auto;
    }

    .col-md-offset-1 {
        margin-left: calc((1 / 12) * 100%);
    }

    .col-md-offset-2 {
        margin-left: calc((2 / 12) * 100%);
    }

    .col-md-offset-3 {
        margin-left: calc((3 / 12) * 100%);
    }

    .col-md-offset-4 {
        margin-left: calc((4 / 12) * 100%);
    }

    .col-md-offset-5 {
        margin-left: calc((5 / 12) * 100%);
    }

    .col-md-offset-6 {
        margin-left: calc((6 / 12) * 100%);
    }

    .col-md-offset-7 {
        margin-left: calc((7 / 12) * 100%);
    }

    .col-md-offset-8 {
        margin-left: calc((8 / 12) * 100%);
    }

    .col-md-offset-9 {
        margin-left: calc((9 / 12) * 100%);
    }

    .col-md-offset-10 {
        margin-left: calc((10 / 12) * 100%);
    }

    .col-md-offset-11 {
        margin-left: calc((11 / 12) * 100%);
    }

    .col-md-offset-12 {
        margin-left: calc((12 / 12) * 100%);
    }

    /* 元素水平方向间隔 */
    .col-md-gutter-0 {
        padding: 0;
    }

    .col-md-gutter-1 {
        padding: 0 2px;
    }

    .col-md-gutter-2 {
        padding: 0 4px;
    }

    .col-md-gutter-3 {
        padding: 0 6px;
    }

    .col-md-gutter-4 {
        padding: 0 8px;
    }

    .col-md-gutter-5 {
        padding: 0 10px;
    }

    .col-md-gutter-6 {
        padding: 0 12px;
    }

    .col-md-gutter-7 {
        padding: auto 14px;
    }

    .col-md-gutter-8 {
        padding: auto 16px;
    }

    .col-md-gutter-9 {
        padding: auto 18px
    }

    .col-md-gutter-10 {
        padding: auto 20px;
    }

    .col-md-gutter-11 {
        padding: auto 22px;
    }

    .col-md-gutter-12 {
        padding: auto 24px;
    }

    /* 显示/隐藏 */
    .d-md-hidden {
        display: none !important;
    }

    .d-md-show {
        display: block !important;
    }
}

/* lg  */
@media (min-width:992px) {

    .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;
        position: relative;
    }

    .col-lg-1 {
        width: calc((1 / 12) * 100%);
    }

    .col-lg-2 {
        width: calc((2/ 12) * 100%);
    }

    .col-lg-3 {
        width: calc((3 / 12) * 100%);
    }

    .col-lg-4 {
        width: calc((4 / 12) * 100%);
    }

    .col-lg-5 {
        width: calc((5 / 12) * 100%);
    }

    .col-lg-6 {
        width: calc((6 / 12) * 100%);
    }

    .col-lg-7 {
        width: calc((7 / 12) * 100%);
    }

    .col-lg-8 {
        width: calc((8 / 12) * 100%);
    }

    .col-lg-9 {
        width: calc((9 / 12) * 100%);
    }

    .col-lg-10 {
        width: calc((10 / 12) * 100%);
    }

    .col-lg-11 {
        width: calc((11 / 12) * 100%);
    }

    .col-lg-12 {
        width: 100%;
    }

    /* 向右推 */
    .col-lg-push-0 {
        right: auto;
    }

    .col-lg-push-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-lg-push-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-lg-push-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-lg-push-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-lg-push-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-lg-push-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-lg-push-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-lg-push-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-lg-push-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-lg-push-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-lg-push-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-lg-push-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 向左推 */
    .col-lg-pull-0 {
        right: auto;
    }

    .col-lg-pull-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-lg-pull-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-lg-pull-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-lg-pull-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-lg-pull-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-lg-pull-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-lg-pull-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-lg-pull-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-lg-pull-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-lg-pull-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-lg-pull-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-lg-pull-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 水平方向的偏移 */
    .col-lg-offset-0 {
        margin-left: auto;
    }

    .col-lg-offset-1 {
        margin-left: calc((1 / 12) * 100%);
    }

    .col-lg-offset-2 {
        margin-left: calc((2 / 12) * 100%);
    }

    .col-lg-offset-3 {
        margin-left: calc((3 / 12) * 100%);
    }

    .col-lg-offset-4 {
        margin-left: calc((4 / 12) * 100%);
    }

    .col-lg-offset-5 {
        margin-left: calc((5 / 12) * 100%);
    }

    .col-lg-offset-6 {
        margin-left: calc((6 / 12) * 100%);
    }

    .col-lg-offset-7 {
        margin-left: calc((7 / 12) * 100%);
    }

    .col-lg-offset-8 {
        margin-left: calc((8 / 12) * 100%);
    }

    .col-lg-offset-9 {
        margin-left: calc((9 / 12) * 100%);
    }

    .col-lg-offset-10 {
        margin-left: calc((10 / 12) * 100%);
    }

    .col-lg-offset-11 {
        margin-left: calc((11 / 12) * 100%);
    }

    .col-lg-offset-12 {
        margin-left: calc((12 / 12) * 100%);
    }

    /* 元素水平方向间隔 */
    .col-lg-gutter-0 {
        padding: 0;
    }

    .col-lg-gutter-1 {
        padding: 0 2px;
    }

    .col-lg-gutter-2 {
        padding: 0 4px;
    }

    .col-lg-gutter-3 {
        padding: 0 6px;
    }

    .col-lg-gutter-4 {
        padding: 0 8px;
    }

    .col-lg-gutter-5 {
        padding: 0 10px;
    }

    .col-lg-gutter-6 {
        padding: 0 12px;
    }

    .col-lg-gutter-7 {
        padding: auto 14px;
    }

    .col-lg-gutter-8 {
        padding: auto 16px;
    }

    .col-lg-gutter-9 {
        padding: auto 18px
    }

    .col-lg-gutter-10 {
        padding: auto 20px;
    }

    .col-lg-gutter-11 {
        padding: auto 22px;
    }

    .col-lg-gutter-12 {
        padding: auto 24px;
    }

    /* 显示/隐藏 */
    .d-lg-hidden {
        display: none !important;
    }

    .d-lg-show {
        display: block !important;
    }
}

/* xl */
@media (min-width:1200px) {

    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        float: left;
        position: relative;
    }

    .col-xl-1 {
        width: calc((1 / 12) * 100%);
    }

    .col-xl-2 {
        width: calc((2/ 12) * 100%);
    }

    .col-xl-3 {
        width: calc((3 / 12) * 100%);
    }

    .col-xl-4 {
        width: calc((4 / 12) * 100%);
    }

    .col-xl-5 {
        width: calc((5 / 12) * 100%);
    }

    .col-xl-6 {
        width: calc((6 / 12) * 100%);
    }

    .col-xl-7 {
        width: calc((7 / 12) * 100%);
    }

    .col-xl-8 {
        width: calc((8 / 12) * 100%);
    }

    .col-xl-9 {
        width: calc((9 / 12) * 100%);
    }

    .col-xl-10 {
        width: calc((10 / 12) * 100%);
    }

    .col-xl-11 {
        width: calc((11 / 12) * 100%);
    }

    .col-xl-12 {
        width: 100%;
    }

    /* 向右推 */
    .col-xl-push-0 {
        right: auto;
    }

    .col-xl-push-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-xl-push-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-xl-push-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-xl-push-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-xl-push-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-xl-push-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-xl-push-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-xl-push-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-xl-push-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-xl-push-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-xl-push-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-xl-push-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 向左推 */
    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-pull-1 {
        right: calc((1 / 12) * 100%);
    }

    .col-xl-pull-2 {
        right: calc((2 / 12) * 100%);
    }

    .col-xl-pull-3 {
        right: calc((3 / 12) * 100%);
    }

    .col-xl-pull-4 {
        right: calc((4 / 12) * 100%);
    }

    .col-xl-pull-5 {
        right: calc((5 / 12) * 100%);
    }

    .col-xl-pull-6 {
        right: calc((6 / 12) * 100%);
    }

    .col-xl-pull-7 {
        right: calc((7 / 12) * 100%);
    }

    .col-xl-pull-8 {
        right: calc((8 / 12) * 100%);
    }

    .col-xl-pull-9 {
        right: calc((9 / 12) * 100%);
    }

    .col-xl-pull-10 {
        right: calc((10 / 12) * 100%);
    }

    .col-xl-pull-11 {
        right: calc((11 / 12) * 100%);
    }

    .col-xl-pull-12 {
        right: calc((12 / 12) * 100%);
    }

    /* 水平方向的偏移 */
    .col-xl-offset-0 {
        margin-left: auto;
    }

    .col-xl-offset-1 {
        margin-left: calc((1 / 12) * 100%);
    }

    .col-xl-offset-2 {
        margin-left: calc((2 / 12) * 100%);
    }

    .col-xl-offset-3 {
        margin-left: calc((3 / 12) * 100%);
    }

    .col-xl-offset-4 {
        margin-left: calc((4 / 12) * 100%);
    }

    .col-xl-offset-5 {
        margin-left: calc((5 / 12) * 100%);
    }

    .col-xl-offset-6 {
        margin-left: calc((6 / 12) * 100%);
    }

    .col-xl-offset-7 {
        margin-left: calc((7 / 12) * 100%);
    }

    .col-xl-offset-8 {
        margin-left: calc((8 / 12) * 100%);
    }

    .col-xl-offset-9 {
        margin-left: calc((9 / 12) * 100%);
    }

    .col-xl-offset-10 {
        margin-left: calc((10 / 12) * 100%);
    }

    .col-xl-offset-11 {
        margin-left: calc((11 / 12) * 100%);
    }

    .col-xl-offset-12 {
        margin-left: calc((12 / 12) * 100%);
    }

    /* 元素水平方向间隔 */
    .col-xl-gutter-0 {
        padding: 0;
    }

    .col-xl-gutter-1 {
        padding: 0 2px;
    }

    .col-xl-gutter-2 {
        padding: 0 4px;
    }

    .col-xl-gutter-3 {
        padding: 0 6px;
    }

    .col-xl-gutter-4 {
        padding: 0 8px;
    }

    .col-xl-gutter-5 {
        padding: 0 10px;
    }

    .col-xl-gutter-6 {
        padding: 0 12px;
    }

    .col-xl-gutter-7 {
        padding: auto 14px;
    }

    .col-xl-gutter-8 {
        padding: auto 16px;
    }

    .col-xl-gutter-9 {
        padding: auto 18px
    }

    .col-xl-gutter-10 {
        padding: auto 20px;
    }

    .col-xl-gutter-11 {
        padding: auto 22px;
    }

    .col-xl-gutter-12 {
        padding: auto 24px;
    }

    /* 显示/隐藏 */
    .d-xl-hidden {
        display: none !important;
    }

    .d-xl-show {
        display: block !important;
    }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容