使用Bootstrap 4创建响应式正方形网格的问题

嘿，我懂你想要实现的效果——用Bootstrap 4做一个能自动适配屏幕的响应式正方形网格。你现在的思路方向是对的，利用padding-top: 100%借助CSS百分比padding基于父元素宽度计算的特性来实现宽高相等，但还差几步才能让效果完美落地，尤其是内容放置的问题。

问题分析 #

你当前的代码里，.col { padding-top: 100%; }确实能把每一列的高度拉到和宽度一致，但因为padding属于盒子内边距，要是想在正方形里放内容，内容会被这个padding挤到下方，而且没有明显的正方形边界（除非你额外加背景或边框），视觉效果会很奇怪。

完整解决方案 #

我们需要调整HTML结构，给每个列加一个内部容器来承载内容，再配合CSS定位让内容铺满正方形，同时保留Bootstrap自带的响应式特性：

HTML 代码

<div class="container">
  <div class="row">
    <div class="col mb-3">
      <div class="square-content">
        <!-- 这里可以放任意内容：文字、图片、图标等 -->
        正方形1
      </div>
    </div>
    <div class="col mb-3">
      <div class="square-content">
        正方形2
      </div>
    </div>
    <div class="col mb-3">
      <div class="square-content">
        正方形3
      </div>
    </div>
    <div class="col mb-3">
      <div class="square-content">
        正方形4
      </div>
    </div>
    <div class="col mb-3">
      <div class="square-content">
        正方形5
      </div>
    </div>
  </div>
</div>

CSS 代码

.col {
  padding-top: 100%; /* 核心逻辑：让高度等于父元素宽度，维持正方形比例 */
  position: relative; /* 为内部容器的绝对定位提供参考坐标系 */
  border: 1px solid #eee; /* 可选：添加边框，方便直观看到正方形边界 */
}

.square-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem; /* 可选：给内容添加内边距，避免紧贴边框 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：让内容在正方形内居中显示 */
  background-color: #f8f9fa; /* 可选：添加背景色，区分每个正方形 */
}

关键细节说明 #

• padding-top: 100%：这是实现正方形的核心，CSS中百分比的padding/margin都是基于父元素宽度计算的，所以无论屏幕如何缩放，列的高度始终和宽度保持一致。
• position: relative：给每个.col设置相对定位，确保内部的.square-content绝对定位时，是相对于当前列来确定位置的。
• .square-content的绝对定位：让这个容器完全覆盖整个正方形区域，这样内容就不会被padding挤出去，还能灵活调整内容的对齐方式。
• mb-3：Bootstrap的内置间距类，给每个列添加底部外边距，避免行与行之间的正方形紧贴在一起，提升视觉舒适度。

这样调整后，不管屏幕尺寸怎么变化，每个列都会保持完美的正方形比例，内容也能正常显示在正方形内部，完全满足响应式的需求。

内容的提问来源于stack exchange，提问作者Mauricio Machado