css - Bootstrap 缩略图和标题类的响应式 CSS

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 与内联 block 对齐，您可能必须在它们之间放置一个 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;
}