我用bootstrap缩略图类创建了一个可点击图像的网格。由于某种原因，它们有一个边框，这让我很恼火。
超文本：
<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>
6条答案
按热度按时间elcex8rz1#
您可以通过将以下内容添加到CSS文件来覆盖默认的引导缩略图边框设置：
你也可以通过在Chrome浏览器中检查缩略图的属性来模拟。找到.thumbnail属性并取消选中border。你会看到它从你的图像中消失。Screenshot of .thumbnail一旦你将代码添加到CSS文件中。重新检查，你会看到border属性带有删除线。.thumbnail with no border
2guxujil2#
只需从.thumbnail中删除所有边框属性，所有边框都将被删除
aoyhnmkz3#
进入你的bootstrap.min.css（如果你有本地的，否则你必须下载它）并搜索：“缩略图”，然后删除它说的部分“边界”左右。不要有任何引导版本available否则我会告诉你在哪里，先生。
w7t8yxp54#
经过检查的元素，填充是我需要调整对我的以及边界，以消除该框，以防万一其他人遇到这个。
thumbnail { padding: 0; border: 0; }gopyfrb35#
如果您使用最新的Bootstrap，
使用类"img-thumbnail"在你的img标签!
示例：
&添加类"img-缩略图"在您的文件自定义CSS引导!
示例：
tf7tbtn26#
为什么不像这样添加边界类...