css - 去掉缩略图中的空白

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 %>

屏幕截图 http://postimg.org/image/4ih2jd481/ 我怎样才能减少每个缩略图之间的填充。我尝试添加右填充并设置少量像素，它也不起作用。

Answer 1

很可能是列需要减少任何填充。您可以使用 CSS 属性选择器来完成此操作。参见 MDN了解更多信息。请参阅标记为缩略图示例 的第二个工作示例，它特别适用于您的问题。

基本示例:

.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>

旁注:您可能需要考虑使用 thumbnail类而不是 img-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>