Html 独自创立删除缩略图周围的边框

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

HTML:

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>

.网格{
背景色：#EFEF；
边框底部：1px实心#dbdb；
最小高度：100%；
}
.网格.行.缩略图{
边界：0px；
盒影：无；
边界半径：0px；
背景色：#000；
}
.网格.行.缩略图img:悬停{
背景色：#000！重要

只需从中删除所有边框属性。缩略图和所有边框都将被删除

.the-grid .row .thumbnail{
box-shadow: none;
}

---

进入你的bootstrap.min.css（如果你有本地的，否则你必须下载），搜索：“.thumbnail”，然后删除上面写着“border”的部分或者如此。没有任何可保存的引导版本，否则我会告诉您在哪里，sry。

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

.thumbnail {
border: 0;
}

您还可以通过检查Chrome.Find.thumbnail属性中缩略图的属性并取消选中边框来模拟此操作。您将看到它从图像中消失。 一旦你将代码添加到CSS文件中。重新检查，你会发现border属性带有删除线。

---

检查完元素后，我需要调整我的填充物以及边框，以便移除该框，以防其他人碰到该框

缩略图{
填充：0；
边界：0；
}

如果使用最新的引导

在你的img标签上使用“img缩略图”类

例如：

<img class ="img-thumbnail" src="Your_Path_Image" alt="">

---

不走运。它仍然在那里。检查这个链接，从你给这里的css我删除了边框，但如果边框仍然在这里，那么这不仅仅是针对缩略图的选择器。请使用firebug或devtools检查它以准确查看。

<img class ="img-thumbnail" src="Your_Path_Image" alt="">