2016-01-04 3 views
1

У меня странная проблема. По какой-то причине мои изображения внутри моих миниатюр не заполняют раздел миниатюр. Между краем эскиза и изображением есть хороший промежуток между ними. ProblemBootstrap Thumbnail Расстояние между изображениями

Я пытаюсь удалить пустое пространство, которое вы видите вокруг iamges. Я уже пробовал width: 100%

.thumbnail img { 
    width: 100%; 
} 

    .thumbnail { 
    box-shadow: 0 0 23px black; 
} 

Я хочу IMG пройти весь путь до края эскиза

HTML код

<div class="col-md-9"> 
         <div class="row hidden-xs hidden-sm"> 
          <img src="../images/Signs/SignsFrontPageBanner.gif" class="img-rounded header" style="max-width: 100%; "> 
         </div> 

         <div class="row"> 

          <h1 id="featured">Sign Templates</h1> 

          <div col="col-md-8 col-md-offset-2"> 
           <div class="btn-group btn-breadcrumb"> 
            <a href="http://inksigns.com/InkSigns/index.html" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a> 
            <a href="#" class="btn btn-default active">Signs</a> 
           </div> 
          </div> 
          <div class="col-sm-4 col-lg-3 col-md-4"> 
           <div class="thumbnail backgroundhover"> 
            <a href="RealEstateSigns/RealEstateSign-index.html"><img src="../images/RealEstate/RealEstateSignThumbnail.gif" class="img-rounded"></a> 
            <div class="caption"> 
             <h4 class="pull-right"></h4> 
             <h4 style="text-align: center;"><a href="RealEstateSigns/RealEstateSign-index.html">Real Estate</a> 
          </h4> 
             <p>Take a look at our wide assortment of Real Estate Signs & Accessories.</p> 
            </div> 

           </div> 
          </div> 

          <div class="col-sm-4 col-lg-3 col-md-4"> 
           <div class="thumbnail backgroundhover"> 
            <a href="../Banners/GeneralBanners.html"><img src="../images/Banners/BannerThumbnail.gif" class="img-rounded "></a> 
            <div class="caption"> 
             <h4 class="pull-right"></h4> 
             <h4 style="text-align: center;"><a href="../Banners/GeneralBanners.html">Banners</a> 
          </h4> 
             <p>Take a look at our wide assortment of Banners.</p> 
            </div> 

           </div> 
          </div> 

          <div class="col-sm-4 col-lg-3 col-md-4"> 
           <div class="thumbnail backgroundhover"> 
            <a href="../Magnets/magnets-index.html"><img src="../images/Magnets/FrontPageMagnetThumbnail.gif" class="img-rounded "></a> 
            <div class="caption"> 
             <h4 class="pull-right"></h4> 
             <h4 style="text-align: center;"><a href="../Magnets/magnets-index.html">Magnets</a> 
          </h4> 
             <p>Take a look at our wide assortment of magnets.</p> 
            </div> 

           </div> 
          </div> 

          <div class="col-sm-4 col-lg-3 col-md-4"> 
           <div class="thumbnail backgroundhover"> 
            <a href="Decals/DecalSigns-index.html"><img src="../images/Decals/DecalsThumbnail.gif" alt="" class="img-rounded "></a> 
            <div class="caption"> 
             <h4 class="pull-right"></h4> 
             <h4 style="text-align: center;"><a href="Decals/DecalSigns-index.html">Decals</a> 
          </h4> 
             <p>Take a look at our wide assortment of Decals.</p> 
            </div> 

           </div> 
          </div> 
+0

Либо ваши изображения, либо div, содержащие изображения, имеют отступы. Вы должны попробовать настроить миниатюры на ** padding: 0; ** - если это не удается, попробуйте его на содержащихся div. Отправьте jfiddle, если ни один из них не работает, и я найду его для вас. – Joel

+0

Опубликовать html-код – roll

+0

Если я добавил отступы: от 0 до фонового наведения, он изменит размер img и удалит прокладку. Но когда я добавляю добавку: 0 в класс миниатюр ничего не меняется – Charles

ответ

1

Я исправил проблему путем добавления padding: 0px !important; к .thumbnail, это необходимо! important

Смежные вопросы