0
点赞
收藏
分享

微信扫一扫

Bootstrap列偏移

非常帅气的昵称吧 2022-03-26 阅读 41
bootstrap

<!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>

    <!--[if lt IE 9]>

      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

    <!-- 引入bootstrap样式文件 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <style>

        .row div {

            height: 50px;

            background-color: brown;

        }

       

        .row div:hover {

            background-color: bisque;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-4">1</div>

            <!-- col-lg-offset-4设置列向右便偏移4个格子 -->

            <div class="col-lg-4 col-lg-offset-4">2</div>

        </div>

        <div class="row">

            <div class="col-lg-2">1</div>

            <div class="col-lg-2 col-lg-offset-8">2</div>

        </div>

    </div>

</body>

</html>

举报

相关推荐

0 条评论