老师请检查

来源:2-4 自由编程

小丁同学ddd

2020-04-01 16:54:58

有个问题 为什么六张图片也按照12个算呢??

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link type="text/css" rel="stylesheet" href="css/grid.css"  />
    </head>
    <style>
        *{
            box-sizing: border-box;
            padding:0;
            margin:0;
            }
            img{
            width: 100%;
            }
            body{
            padding-top: 100px;
            }
            .container{
            background-color: #eee;
            }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/2.jpg"  />
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/2.jpg"  />
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/4.jpg"  />
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/5.jpg"  />
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/5.jpg"  />
                </div>
                <div class="col-sm-6 col-md-4 col-lg-2 col-12">
                    <img src="img/6.jpg"  />
                </div>
            </div>
        </div>
    </body>
</html>


写回答

1回答

好帮手慕粉

2020-04-01

同学你好,关于同学的问题回答如下:

1、代码实现的是正确的。

2、col-12代表的是一个图片占据12个栅格,而非是设置12个图片,可以查看下grid.css文件:

http://img.mukewang.com/climg/5e8466f309283c9c02870084.jpg

同学如果忘了怎么使用的,可以回顾下上节视频。

祝学习愉快~

0

0 学习 · 6815 问题

查看课程