Bootstrap列布局无响应，3张顶图+2张底图网格缩小屏幕后展示异常

核心问题说明 #

1. 卡片容器.container5设置了固定宽度300px，无法随Bootstrap列的宽度自适应，是布局错位的核心原因
2. 5张卡片全部放在同一个row容器内，行内元素过多时换行逻辑容易异常
3. 仅设置了md断点的列宽规则，小屏设备下没有对应适配规则

一、HTML代码修改 #

1. 将卡片分为两个独立的row容器，顶部3张放第一个row，底部2张放第二个row
2. 给列补充小屏断点适配类，同时添加间距类避免卡片贴合
3. 给img标签增加object-fit: cover样式避免图片拉伸变形

<div className="container">
  {/* 顶部3张卡片行 */}
  <div className="row g-3 mb-3">
    <div className="col-md-4 col-sm-6 col-12">
      <div className="container5">
        <img
          style={{ height: "100%", width: "100%", objectFit: "cover" }}
          src="https://www.w3schools.com/howto/img_avatar.png"
        />
        <div className="overlay">
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              marginTop: "10px",
              marginBottom: "-10px",
            }}
          >
            <div style={{ flexDirection: "column" }}>
              <div
                style={{
                  color: "white",
                  marginTop: "20px",
                  paddingLeft: "10px",
                  marginBottom: "-20px",
                }}
              >
                Random Name
              </div>
              <div
                style={{
                  fontSize: "14px",
                  color: "yellow",
                  paddingLeft: "10px",
                  marginTop: "13px",
                }}
              >
                Software Engineer
              </div>
            </div>
            <div
              style={{
                float: "right",
                width: "50%",
                direction: "rtl",
                paddingTop: "25px",
              }}
            >
              <img
                style={{
                  height: "20px",
                  width: "20px",
                  backgroundColor: "white",
                }}
                src="linkedin.svg"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    {/* 剩余2张顶部卡片结构和上面完全一致 */}
    <div className="col-md-4 col-sm-6 col-12">
      {/* 复制上面卡片内容 */}
    </div>
    <div className="col-md-4 col-sm-6 col-12">
      {/* 复制上面卡片内容 */}
    </div>
  </div>

  {/* 底部2张卡片行 */}
  <div className="row g-3">
    <div className="col-md-6 col-sm-12">
      {/* 卡片内容和上面完全一致 */}
    </div>
    <div className="col-md-6 col-sm-12">
      {/* 卡片内容和上面完全一致 */}
    </div>
  </div>
</div>

二、CSS代码修改 #

调整.container5的宽度规则，改为自适应宽度，保留最大尺寸限制：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  font-family: "Poppins", sans-serif;
}

.container5 {
  border-radius: 10px;
  width: 100%;
  max-width: 300px;
  height: 400px;
  overflow: hidden;
  background-color: coral;
  margin: 0 auto;
}

.overlay {
  clip-path: polygon(0 36%, 100% 0, 100% 100%, 0% 100%);
  width: 100%;
  position: absolute;
  padding: 1rem;
  bottom: -10%;
  background-color: #0e2043;
  transition: bottom 250ms ease;
}

.container5:hover .overlay {
  bottom: 0;
}

适配效果 #

• 中等及以上屏幕（≥768px）：顶部3张一排、底部2张一排，完全符合预期设计
• 小屏幕（576px~767px）：顶部一行2张、第三张自动换行，底部一行1张，无错位
• 超小屏幕（<576px）：所有卡片垂直排布，一行1张适配移动端

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