html - Bootstrap 。删除缩略图周围的边框

Question

我使用 Bootstrap 缩略图类来创建可点击图像的网格。出于某种原因，他们有一个边界，这让我很烦。

HTML:

<div class = "the-grid">
<div class = "container">        
<div class = "row">
              <div class = "col-md-4">
                <div class = "thumbnail">
                    <image src = "Images/data.png"/>
                </div>
                 <div class = "thumbnail">
                    <image src = "Images/cloud.png"/>
                </div>
</div>
</div>
</div>

CSS:

<style>
.the-grid{
background-color: #efefef;    
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
}
.the-grid .row .thumbnail{
border: 0px;
box-shadow: none;
border-radius:0px;
background-color: #000;
}

.the-grid .row .thumbnail  img:hover {
 background-color: #000 !importantl        
</style>

Answer 1

您可以通过将此添加到您的 CSS 文件来覆盖默认的 Bootstrap 缩略图边框设置:

.thumbnail {
border: 0;
}

您还可以通过检查 Chrome 中缩略图的属性来模拟这一点。查找 .thumbnail 属性并取消选中边框。您会看到它从您的图像中消失。 Screenshot of .thumbnail 将代码添加到 CSS 文件后。重新检查，您会看到带有删除线的边框属性。 .thumbnail with no border