Bootstrap-栅栏系统

最新推荐文章于 2023-10-20 22:53:02 发布

幸运的菇凉

最新推荐文章于 2023-10-20 22:53:02 发布

阅读量428

点赞数

分类专栏：学习心得

本文链接：https://blog.csdn.net/qq_27626645/article/details/78808441

版权

学习心得专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="container ">
       <!-- <div class="row">
            <div class="col-md-6 a" >1</div>
            <div class="col-md-6 a" >1</div>
        </div>-->
        <!--为了避免不同屏幕导致排版不同-->
        <div class="row">
            <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 a" >1</div>
            <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 a" >1</div>
        </div>
        <!--让两列中间有空隙-->
        <div class="row">
            <div class="col-md-6 a" >1</div>
            <div class="col-md-5 col-md-offset-1 a" >1</div>
        </div>
        <!--嵌套-->
        <div class="row">
            <div class="col-md-6 a" >

                    <div class="col-md-6 a" >1</div>
                    <div class="col-md-6 a" >1</div>

            </div>
            <div class="col-md-6 a" >1</div>
        </div>
        <!--交换-->
        <div class="row">
            <div class="col-md-6 col-md-push-6 a" >1</div>
            <div class="col-md-6 col-md-pull-6 a" >2</div>
        </div>
    </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

幸运的菇凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-栅栏系统

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style...
复制链接

扫一扫