救命...bootsrap排列样式出错

Question

自己用用bootsrap试着写了一个网页，卡片列表用的是bootstrap的container类和 row类，

加入了8，9个div，然后排列就出错了！！！如下图所示：

卡片列表对应的代码如下：

<!-- skill card -->
<div class="container up-blank">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="images/logo/signed_logo_brod.png">
                    <h3>佬铁会</h3>
                    <p>一个自由的技能共享平台</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="photo/master/20170729/thumbnail/IMG_20170510_114644.jpg">
                    <h3>海报制作</h3>
                    <p>利用Photoshop轻松制作有设计感的海报</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="images/START%20NOW.jpg">
                    <h3>铁铁日记</h3>
                    <p>桃之夭夭，灼灼其华。</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                   <img class="thumbnail-image" src="images/%E4%BD%AC-%E6%8E%A8%E9%80%81.jpg">
                    <h3>LOGO</h3>
                    <p>LOGO设计</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="photo/master/20170729/thumbnail/img-086fa14e7cf24bc250b7186cf06d0911.jpg">
                    <h3>Crossdress</h3>
                    <p>程序员的cosplay亚文化</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="images/%E9%93%81%E9%93%81%E6%97%A5%E8%AE%B0%20%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80.jpg">
                    <h3>王者荣耀</h3>
                    <p>王者学霸带飞</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="photo/master/20170729/thumbnail/img-f9b9bb770096492348cc514050a9041b.jpg">
                    <h3>WLOP板绘</h3>
                    <p>美哭了！</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <img class="thumbnail-image" src="photo/master/20170729/thumbnail/img-160342706af9d524829db6d265e2a96e.jpg">
                    <h3>PC游戏开发</h3>
                    <p>和陈星汉一起走进游戏开发的世界</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">入会</a>
                        <a href="#" class="btn btn-default" role="button">收藏</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

求救啊..

Answer 1

因为这种列排列是以float:left为基础的。所以会导致图片填充剩余空间，最好你把图片设置一个相同的高度。

Answer 2

你把所有图片的宽高比都限制成一样的应该就好了