Question

我正在使用bootstrap并将行分为4：8，在col-4中我在col-8中显示一个段落我试图在每个col中显示3张图片的缩略图轮播，问题我是面对的是图片在旋转木马的左右两侧有一些边距，我想要删除，其次我想在旋转木马中显示每张240 * 158（实际）尺寸的3幅图像。这是我的代码

实际上我希望有一些像

这样的东西

HTML

<div class="col-md-8">
        <h1> Current Projects </h1>

  <div class="carousel slide" id="myCarousel" style="background:#CCC">
    <div class="carousel-inner">
        <div class="item active">
                <ul class="thumbnails">
                    <li class="col-md-4">
                        <div class="fff">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/100x20" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">» Read More</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-sm-4">
                        <div class="fff">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/100x20" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">» Read More</a>
                            </div>
                        </div>
                    </li>
                    <li class="col-sm-4">
                        <div class="fff">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/100x20" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">» Read More</a>
                            </div>
                        </div>
                    </li>
                </ul>
          </div>

CSS

img{
max-width:100%;
}
.thumbnails li> .fff .caption 
{ 
background:#fff !important; 
padding:10px
}
ul.thumbnails { 
margin-bottom: 0px;
}
/* Thumbnail Box */
.caption h4 {
color: #444;
}
.caption p {  
color: #999;
}
li { list-style-type:none;}

Answer 1

你需要从缩略图类中删除填充和边框

像这样

.thumbnail{
  padding: 0;
  border: none;
}

查看我更新的fiddle

调整引导程序中的图像大小和填充

1 个答案: