我试图摆脱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 %>
屏幕截图http://postimg.org/image/4ih2jd481/ 如何减少每个缩略图之间的填充。我试图添加右边距并设置较少的像素数,它也无法正常工作。
答案 0 :(得分:1)
columns
最有可能需要减少任何填充。您可以使用CSS属性选择器来完成此任务。有关详细信息,请参阅MDN。请参阅专门针对您的问题标记为缩略图示例的第二个工作示例。
基本示例:
.some-class > [class*='red'] {
background: red;
}
.another-class {
background: green;
}
&#13;
<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>
&#13;
旁注:您可能需要考虑使用thumbnail类而不是img-thumbnail,因为它似乎涵盖了您的用例。如果动态生成columns
且身高不同,您可能需要清除thumbnails
。
缩略图示例:
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
}
}
&#13;
<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>
&#13;