bootstrap的栅格使用问题

Question

 <div class="row">
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/1.jpg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/3.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/2.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/4.jpeg" alt="my wallpaper1"></a></div>  
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/1.jpg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/3.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/2.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/4.jpeg" alt="my wallpaper1"></a></div>  
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/1.jpg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/3.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/2.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/4.jpeg" alt="my wallpaper1"></a></div>  
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/1.jpg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/3.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/2.jpeg" alt="my wallpaper1"></a></div>
            <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/4.jpeg" alt="my wallpaper1"></a></div>  
</div>

结果：

为什么会出现空白？

.photo_list{
    width:100%;
    max-height: 200px;
    padding: 10px;
}

Answer 1

大概是图片有了最大的高度，所以被按比例缩放了了。

Answer 2

bootstrap的每一列都是有padding的，具体你可以参见如下：

具体参见如下文档：http://v3.bootcss.com/css/#grid