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

只需删除.thumbnail中的所有border属性，所有边框都将被删除

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

Answer 2

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

.thumbnail {
border: 0;
}

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

Answer 3

进入你的bootstrap.min.css（如果你有本地，否则你必须下载它）并搜索：“。thumbnail”然后删除它所说的“边界”左右的部分.. Don'有任何引导版本可用，否则我会说你在哪里，sry。

Answer 4

在检查元素之后，我需要调整填充以及边框以移除该框以防万一其他人遇到此情况。

thumbnail { padding: 0; border: 0; }

Answer 5

如果您使用最新的 Bootstrap，

在您的 img 标签上使用“img-thumbnail”类！

示例：

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

在您的文件自定义 CSS Bootstrap 上添加类“img-thumbnail”！

示例：

.img-thumbnail{
    background: none;
    border: none;
}

引导。删除缩略图图像周围的边框

5 个答案: