Bootstrap。刪除縮略圖圖片的邊框

我使用了引導縮略圖類來創建可點擊圖片的網格。出於某種原因，他們有一個邊界，它讓我討厭。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>

來源

2015-10-18 Madhu G Nadig

只是刪除從.thumbnail所有邊境酒店的所有邊界都將被刪除

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

來源

2015-10-18 15:58:33 riogrande

沒有運氣。它仍然存在。 –

http://codepen.io/riogrande/pen/KdyeoG 檢查此鏈接，從CSS給你在這裏我刪除了邊框，但如果邊框仍然在這裏，那麼這不僅是選擇器是針對縮略圖。檢查它與螢火蟲或devtools準確地看到。 – riogrande

進入您的bootstrap.min。 css（如果你有它本地的，否則你必須下載它）並搜索：「.thumbnail」，然後刪除該部分它說「邊界」左右..沒有任何引導版本aviable否則我會說你在哪裏，sry。

來源

2015-10-28 23:10:42

您可以通過添加這對你的CSS文件來覆蓋默認引導縮略圖邊框設置：

.thumbnail { 
border: 0; 
}

您也可以通過檢查在Chrome縮略圖的性能模擬此。查找.thumbnail屬性並取消選中邊框。你會看到它從你的形象中消失。 Screenshot of .thumbnail 將代碼添加到CSS文件後。重新檢查，你會看到帶有刪除線的邊框屬性。 .thumbnail with no border

來源

2017-02-10 03:16:19

檢查元素後，填充是我需要調整我的以及邊框來刪除該框，以防其他人遇到這種情況。

thumbnail { padding: 0; border: 0; }

來源

2018-02-08 04:31:57

Bootstrap。刪除縮略圖圖片的邊框

回答

相關問題