Bootstrap 4方格

Question

我想用 Bootstrap4 创建一个响应式正方形网格，为此，我正在做这样的事情（一行）：

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

我将 colclass 设置为具有以下规则：

.col {
    padding-top: 100%;
}

但这只会用视口高度的每一列创建一行。

这个解决方案以前有用，但我认为它破坏了 Bootstrap 4 flexbox。

有什么想法吗？

Answer 1

你可以尝试使用 class="w-100"

例子在Bootstrap官方网站

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Answer 2

padding-bottom: 100%

...应用等于父级 width 的填充值。父级宽度为 .rows 宽度。如果你有5个元素，你需要申请padding-bottom: 20%。如果他们是 4，则需要 padding-bottom: 25%，等等...

而且，请记住，如果您希望您的列响应式换行，则需要针对每种情况调整 padding-bottom 值。

一种更简单的方法是将方形项目放在 col 中。这样它们将始终是相对于当前列宽的正方形：

.square {
  padding-bottom: 100%;
}
.orange {background-color: orange;}
.orangered {background-color: orangered;}
.gold {background-color: gold;}
.darkorange {background-color: darkorange;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row no-gutters">
        <div class="col"><div class="square orange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
        <div class="col"><div class="square gold"></div></div>
        <div class="col"><div class="square darkorange"></div></div>
        <div class="col"><div class="square orangered"></div></div>
    </div>
</div>

现在您可以安全地向您的列添加响应性 classes，相对于当前列宽，正方形将保持正方形。

注意我还添加了 no-gutters class 到 row 以删除 col left/right 填充值.
如果您希望容器具有完整的页面宽度，请将 container 更改为 container-fluid。

奖励：如何将内容放入 pre-sized 组件：
上面的解决方案给你留下了下一个问题：正方形的大小完全取决于填充值。如果向其中添加任何流内容，它将变得更大。解决方案是将内容放在文档流之外，像这样：

.square {
  padding-bottom: 100%;
  position: relative;
  height: 0;
}

.square>div {
  position: absolute;
  height: 100%;
  overflow-y: auto;
  padding: 1rem;
}

.orange {
  background-color: orange;
}

.orangered {
  background-color: orangered;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row no-gutters">
    <div class="col">
      <div class="square orange">
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam at. Ultricies tristique nulla aliquet enim tortor at. In egestas erat imperdiet sed euismod. Placerat orci nulla pellentesque dignissim enim sit. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Felis eget nunc lobortis mattis aliquam faucibus. Aliquet porttitor lacus luctus accumsan. Amet risus nullam eget felis eget nunc lobortis mattis. Tortor consequat id porta nibh venenatis cras sed.
          <p>Suspendisse sed nisi lacus sed viverra tellus in. Tellus cras adipiscing enim eu. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Tellus orci ac auctor augue mauris augue neque gravida in. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Et pharetra pharetra massa massa ultricies. Facilisis sed odio morbi quis. Felis eget velit aliquet sagittis id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Facilisis leo vel fringilla est. Quam adipiscing vitae proin sagittis. Mi tempus imperdiet nulla malesuada. Eget arcu dictum varius duis. In eu mi bibendum neque egestas congue quisque egestas. Ut tristique et egestas quis ipsum suspendisse ultrices. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Aliquam faucibus purus in massa tempor nec. Amet luctus venenatis lectus magna fringilla.
          <p>Est ullamcorper eget nulla facilisi etiam dignissim. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Pellentesque elit eget gravida cum sociis. Aliquam faucibus purus in massa tempor nec. Nisl vel pretium lectus quam id leo in vitae. Non consectetur a erat nam at lectus urna. Porttitor massa id neque aliquam vestibulum morbi. Non sodales neque sodales ut etiam sit amet nisl purus. Leo vel orci porta non pulvinar neque laoreet. Nisl nunc mi ipsum faucibus. Non consectetur a erat nam at lectus. Ac turpis egestas sed tempus urna et pharetra pharetra. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ipsum faucibus vitae aliquet nec ullamcorper sit. Egestas congue quisque egestas diam in. Sagittis eu volutpat odio facilisis mauris sit. Dui vivamus arcu felis bibendum ut tristique.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="square orangered">
        <div>
          <p>Tristique senectus et netus et malesuada fames. Semper feugiat nibh sed pulvinar proin gravida. Risus in hendrerit gravida rutrum quisque non. Elit ut aliquam purus sit amet luctus. Porttitor eget dolor morbi non arcu risus quis varius quam. Aliquam eleifend mi in nulla posuere. Venenatis tellus in metus vulputate. Lacinia at quis risus sed vulputate odio. Nisl nisi scelerisque eu ultrices. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Id cursus metus aliquam eleifend mi. Ac feugiat sed lectus vestibulum. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Bibendum neque egestas congue quisque egestas diam in arcu. Mauris in aliquam sem fringilla. Praesent tristique magna sit amet purus gravida quis blandit.
          <p>Felis eget nunc lobortis mattis aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam quis enim lobortis scelerisque fermentum dui. At ultrices mi tempus imperdiet nulla malesuada. Amet volutpat consequat mauris nunc congue. Sit amet mattis vulputate enim nulla aliquet. Diam ut venenatis tellus in metus vulputate eu scelerisque. Quam elementum pulvinar etiam non quam. Id interdum velit laoreet id donec ultrices. Sit amet est placerat in egestas erat imperdiet sed. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Tristique senectus et netus et. Quis viverra nibh cras pulvinar mattis nunc. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Sed odio morbi quis commodo. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Sagittis vitae et leo duis ut diam quam nulla porttitor.
        </div>
      </div>
    </div>
  </div>
</div>

请注意，您应该在每个 .square 中只有一个直接 div 子级（内容包装器）才能正常工作。

Bootstrap 4方格

Bootstrap 4 square grid

css

flexbox

grid

bootstrap-4

twitter-bootstrap-4