Bootstrap. Удаление границы вокруг уменьшенных изображений

Question

Я использовал класс миниатюр начальной загрузки для создания сетки кликабельных изображений. По какой-то причине у них есть граница, и это меня раздражает.

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 и все границы будут удалены

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

Answer 2

Зайдите в bootstrap.min. css (если у вас есть локальный, в противном случае вы его загрузите) и выполните поиск: «.numbnail», а затем удалите часть где он говорит «граница» или около того .. У вас нет какой-либо загрузочной версии, иначе я скажу вам, где это, sry.

Answer 3

Вы можете изменить настройки границы миниатюр начальной загрузки по умолчанию, добавив в файл CSS:

.thumbnail { 
border: 0; 
} 

Вы также можете смоделировать путем проверки свойств эскиза в Chrome. Найдите свойства миниатюры и снимите флажок. Вы увидите, что он исчез из вашего изображения. Screenshot of .thumbnail Как только вы добавите код в свой CSS-файл. Повторно проверьте, и вы увидите, что свойство border с зачеркиванием. .thumbnail with no border

Answer 4

После проверки элемента прокладка была тем, что мне нужно было отрегулировать как на моей, так и на границе, чтобы удалить эту коробку на всякий случай, если кто-то еще столкнется с этим.

thumbnail { padding: 0; border: 0; }