救命...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

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