如何使用Bootstrap Panels在Dashboard容器中创建正方形展示盒子

你可以通过CSS百分比padding实现自适应正方形盒子，兼容Bootstrap的组件样式，完整实现方案如下：

核心实现逻辑 #

• 利用padding百分比相对父元素宽度计算的特性，实现宽高比1:1的正方形区域，适配所有屏幕尺寸
• 基于Bootstrap栅格系统布局，可灵活调整一行展示的盒子数量
• 兼容你正在使用的Bootstrap 3 panel 组件，也支持新版Bootstrap的card组件

完整代码示例 #

<!-- 原有Dashboard容器 -->
<div class="row">
  <h3>Dashboard</h3>
</div>
<!-- 新增卡片容器行 -->
<div class="row">
  <!-- 单个正方形卡片，这里col-xs-6是一行放2个，可根据需求调整为col-xs-3/4等 -->
  <div class="col-xs-6 col-md-3" style="margin-bottom: 15px;">
    <div class="panel panel-primary">
      <div class="panel-heading panel-sm" style="padding: 5px 15px;">Statistics</div>
      <div class="panel-body square-box">
        <div class="box-content">
          <!-- 这里放你的任务列表内容 -->
          <p>任务1：xxxx</p>
          <p>任务2：xxxx</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 可以复制上面的col块增加更多卡片 -->
  <div class="col-xs-6 col-md-3" style="margin-bottom: 15px;">
    <div class="panel panel-success">
      <div class="panel-heading panel-sm" style="padding: 5px 15px;">待完成</div>
      <div class="panel-body square-box">
        <div class="box-content">
          <p>待办1：xxxx</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 需要添加的CSS样式 -->
<style>
.square-box {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.square-box::before {
  content: "";
  display: block;
  /* padding-top百分比等于宽度，实现1:1正方形 */
  padding-top: 100%;
}
.square-box .box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  /* 内容超出时自动出现滚动条，不会破坏正方形结构 */
  overflow-y: auto;
}
</style>

适配新版Bootstrap（4/5版本） #

如果你使用的是不再支持panel的新版Bootstrap，替换为card组件即可，结构逻辑完全一致：

<div class="card text-white bg-primary mb-3">
  <div class="card-header p-2">Statistics</div>
  <div class="card-body square-box">
    <div class="box-content">
      <!-- 任务列表内容 -->
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Doyel Mishra