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

columns最有可能需要减少任何填充。您可以使用CSS属性选择器来完成此任务。有关详细信息，请参阅MDN。请参阅专门针对您的问题标记为缩略图示例的第二个工作示例。

基本示例：

＆＃13;

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

缩略图示例：

＆＃13;

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;

摆脱缩略图中的空白区域

1 个答案: