サムネイルの空白を取り除く

Question

私はimg-thumbnailの余分な空白を取り除こうとしています。私はbootstrap.cssでパディングを調整しましたが、何も変わりませんでした！この大きなスペースを取り除くためにはどうすればいいですか？

bootstrap.css

.img-thumbnail { 
    display: inline-block; 
    max-width: 100%; 
    padding: 3px; 
    line-height: 1.42857143; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    -webkit-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
     transition: all .2s ease-in-out; 
} 

ビューページ

<% @store.products.each_with_index do |product,index| %> 
<div class="col-sm-4"> 
    <div class="img-thumbnail"> 
     <%= link_to image_tag(root_url + "/images/" + product.filename, size: "200x150", alt: product.filename), product %> 
        <div class="caption"> 
         <h4 class="pull-right">$ <%= product.price %></h4> 
          <h4><%= product.name %></h4> 
           <div id="star-img"> 
           <% if current_user != product.store.user %> 
            <%= rating_for product, "overall", :enable_half => false,:disable_after_rate => false %> 
           <% end %> 
          </div> 
         </div> 
       </div> 
      </div> 
<%end %> 

画面Iは同様に各サムネイルの間にパディングを減少させることができる方法http://postimg.org/image/4ih2jd481/ ショット。私は右パディングを追加しようとし、ピクセル数を少なく設定しようとしましたが、どちらもうまくいかないでしょう。

Answer 1

おそらくcolumnsには、詰め物を減らす必要があります。 CSSアトリビュートセレクタを使用してこれを行うことができます。詳細は、MDNを参照してください。問題に特別に適用されるのサムネイルの例というラベルの付いた2番目の作業例を参照してください。

基本例：

.some-class > [class*='red'] { 
 
    background: red; 
 
} 
 
.another-class { 
 
    background: green; 
 
}

<div class="some-class"> 
 
    <div class="no-class"> 
 
    NOT RED 
 
    </div> 
 
    <div class="red"> 
 
    RED 
 
    </div> 
 
    <div class="another-class"> 
 
    GREEN 
 
    </div> 
 
    <div class="red"> 
 
    RED 
 
    </div> 
 
    <div class="no-class"> 
 
    NOT RED 
 
    </div> 
 
    <div class="no-class"> 
 
    NOT RED 
 
    </div> 
 
    <div class="another-class"> 
 
    GREEN 
 
    </div> 
 
</div>

追記：あなたのユースケースをカバーするために表示されますので、あなたが代わりにimg-thumbnailのthumbnailクラスを使用して検討する必要があります。 thumbnailsが動的に生成され、高さが異なる場合は、columnsをクリアする必要があります。

サムネール例：

body { 
 
    padding-top: 25px; 
 
} 
 
.thumbnail-gutter > [class*='col-'] { 
 
    padding-right: 4px; 
 
    padding-left: 4px; 
 
} 
 
.thumbnail-gutter .thumbnail { 
 
    border: 4px solid #f00; 
 
} 
 
@media (min-width: 768px) and (max-width: 1199px) { 
 
    .thumbnail-gutter .col-sm-4:nth-child(3n+1) { 
 
    clear: left 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row thumbnail-gutter"> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/000/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$100.00</h4> 
 
      <h4>ONE NAMENAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/ff0/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$5.00</h4> 
 
      <h4>TWO NAMENAME NAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/f00/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$55.00</h4> 
 
      <h4>THREE NAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/ff0/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$5.00</h4> 
 
      <h4>FOUR NAMENAME NAMENAME NAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/000/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$55.00</h4> 
 
      <h4>FIVE NAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/f00/fff"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$5.00</h4> 
 
      <h4>SIX NAMENAME NAMENAME NAMENAME NAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x375/444/f00"> 
 
     <div class="caption"> 
 
      <h4 class="pull-right">$55.00</h4> 
 
      <h4>SEVEN NAMENAME NAMENAME</h4> 
 
      <div id="star-img"> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      <span class="fa fa-star-o"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>