Bootstrap - 列排序，列偏移，列嵌套

最新推荐文章于 2022-05-23 11:25:56 发布

Southern Wind

最新推荐文章于 2022-05-23 11:25:56 发布

阅读量624

点赞数 2

分类专栏： bootstarp 文章标签： bootstrap css

本文链接：https://blog.csdn.net/nanchen_J/article/details/120102136

版权

bootstarp 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

列排序

引入类名push-*和 pull-*即可

<div class="col-lg-4 col-lg-push-8">左边</div>

<div class="col-lg-8 col-lg-pull-4">右边</div>

列偏移

引入类名:offset

<!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">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div{
            height: 30px;
            background-color: chartreuse;
            text-align: center;
        }
        .container{
            border: black 3px solid;
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="row">
            <div class="col-md-4">左边</div>
            <div class="col-md-4 col-md-offset-4">右边</div>   //4+4+4
        </div>
        <div class="row">
            <div class="col-md-3">左边</div>
            <div class="col-md-3 col-md-offset-6">右边</div>    //3+3+6
        </div>

        <div class="row">
            <div class="col-md-8 col-md-offset-2">居中</div>    //(12-8)/2
        </div>
    </div>
</body>
</html>

如果想让一个或多个盒子偏左或者偏右偏移份数一共是12两个盒子的份数加在一起要等于12份

如果想让一个盒子居中对齐的话，就偏移(12-8)/2份就可以了

如图：

列嵌套

可以在.row中嵌套多个.row盒子

<!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">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
    <style>
        
        .row>div{
            text-align: center;
            background-color: rgb(246, 255, 166);
            height: 50px;
            line-height: 50px;
            border: solid 1px #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">                    //在此处添加一个.row列
                    <div class="col-md-4">1</div>
                    <div class="col-md-8">1</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>
</html>

不可以给div中添加margin值，否则会被挤出盒子

margin-left: 1px;

Southern Wind

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap - 列排序，列偏移，列嵌套

列排序引入类名push-*和pull-*即可<divclass="col-lg-4col-lg-push-8">左边</div><divclass="col-lg-8col-lg-pull-4">右边</div>列偏移引入类名:offset<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
复制链接

扫一扫