Question

我的Rails应用程序中有一个索引视图。我想在索引视图中以标题模式显示专辑封面，没有间隙。我希望bootstrap div与＆＃34; col-sm-4＆＃34;与它们的宽度完全相同的高度，我想要它们是正方形。有没有办法将div的高度与宽度联系起来而不使用javascript？显然，我需要它具有响应性，因为宽度是响应性的。我已经四处搜索，似乎无法找到答案。

这是我的代码：

<%= @albums.each do |f| %>
    <div class="col-sm-4">
        <p><%= f.title %></p>
    </div>
<% end %>

Answer 1

您需要在parrent容器中设置相同的宽度和高度。示例：

<div class="container">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  width: 600px;
}

.container div {
  background:#555;
  border: solid 1px #000;
  width: 100%;
  max-width: 33%;
}

使bootstrap cols正方形

1 个答案: