响应式CSS for Bootstrap Thumbnail＆amp;标题类

Question

我使用Rails，Bootstrap和Imagemagick作为市场应用。

我有一个缩略图网格，上传的图片具有不同的宽高比。图像通过imagemagick调整为缩略图，以适应200x200的空间。

这是我使用bootstrap类获得的截图。

如何使标题一致且响应性地对齐 - 我希望每个产品的产品标题的第一行位于同一行，缩略图框的大小相同，即图像的一部分位于缩略图框，然后是下面的标题。

这是我的html.erb：

<div class="center">
  <div class="row">
    <% @listings.each do |listing| %>
    <div class="col-md-3 col-xs-6">
      <div class="thumbnail" > 
         <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
            <div class="caption">
              <h3><%= listing.name %></h3>
              <p><%= number_to_currency(listing.price) %></p>
            </div>
      </div>
    </div>
  </div>
</div>

这是我的css：

.caption {

  h3 {
  font-size: 17px;
  margin: 2px;
  }

  p {
  font-size: 15px;
  margin: 0px;
  }

}

我尝试使用固定像素容器，但那些没有响应。

Answer 1

将标题和缩略图分别封装到div（图标）中。使用margin-right和margin-left auto来居中。如果它们与内联块对齐，则可能必须在缩略图和标题div之间放置一个br。

<div class="center">
    <div class="row">
    <% @listings.each do |listing| %>
        <div class="col-md-3 col-xs-6">
            <div class="icon">
                <div class="thumbnail" > 
                    <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
                </div>
                <div class="caption">
                    <h3><%= listing.name %></h3>
                    <p><%= number_to_currency(listing.price) %></p>
                </div>
            </div>
        </div>
    <% end %>
    </div>
</div>

.thumnbnail {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.caption {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.caption p {
  font-size: 15px;
  margin: 0px;
}

.caption h3 {
  font-size: 17px;
  margin: 2px;
}