为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

cosloli 2017-07-29 18:03:21

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

加入了8,9个div,然后排列就出错了!!!如下图所示:

http://img1.sycdn.imooc.com/597c5cce000182c619202219.jpg

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

<!-- 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>

求救啊..

查看完整描述

2 回答

?
caocao485

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

查看完整回答
反对 2018-05-11
?
李晓健

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

查看完整回答
反对 2017-07-31

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信