zoukankan html css js c++ java

bootstrap笔记（六）——列偏移与嵌套列

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支持移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <style>
        div[class^="col-md"]{
            border: solid 1px red;
        }
        .row{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--这里面是由行和列来组成-->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>

        <!--列偏移-->
        <div class="row">
            <div class="col-md-2 col-md-offset-2">col-md-2</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-4">col-md-4</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支持移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <style>
        div[class^="col-md"]{
            border: solid 1px red;
        }
        div[class^="col-sm"]{
            border: solid 1px red;
        }
        .row{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--这里面是由行和列来组成-->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>

        <!--列偏移-->
        <div class="row">
            <div class="col-md-2 col-md-offset-2">col-md-2</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-4">col-md-4</div>
        </div>

        <!--嵌套列-->
        <div class="row">
            <!--div.col-md-2.col-md-offset-2-->
            <div class="col-md-2 col-md-offset-2">col-md-2</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-4">col-md-4
                <div class="row">
                    <div class="col-sm-4">列嵌套</div>
                    <div class="col-sm-4">列嵌套</div>
                    <div class="col-sm-4">列嵌套</div>
                    <div class="col-sm-4">列嵌套</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

查看全文

相关阅读:
洛谷 P1146 【硬币翻转】题解
 洛谷 P1025 数的划分
 洛谷 P1017 进制转换
 堆栈练习3—行编辑程序
 实现适配于移动页面中间的swiper图片切换
 原生js实现多组图片抖动效果的问题
 多组抖动效果的图片js封装
 原生js实现图片抖动效果
 正负值地处理以及添加回调函数小案例
 原生js的正负值处理以及添加回调函数

原文地址：https://www.cnblogs.com/xdr630/p/15255071.html