html - 在 Bootstrap 中调整图像大小和填充

Question

我正在使用 bootstrap 并将行划分为 4:8，在 col-4 中我显示一个段落，而在 col-8 中我试图在每个 col 中显示 3 张图片的缩略图轮播，我遇到的问题面对的是图片在旋转木马的左右两侧有一些边距，我想删除它，其次我想在旋转木马中显示 3 张 240*158(实际)大小的图像。这是我的代码

其实我想要一些类似的东西

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