Bootstrap网格盒子缩小时无响应，如何设置小屏最大宽度适配？

适配修改方案 #

你出现小屏错位的核心原因是给Bootstrap的.col栅格元素额外添加了左右margin，打破了栅格本身的宽度计算规则，加上内部浮动+负margin的排版方式稳定性差，屏幕收缩后就会出现内容溢出、布局错乱的问题。以下是包含小屏max-width设置的修改代码：

调整后的CSS代码

/* 统一盒模型，避免宽度计算异常 */
* {
  box-sizing: border-box;
}
.grid-dvr {
  /* 只保留上下margin，左右用padding代替，不破坏栅格宽度分配 */
  margin: 20px 0;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 100px;
  background-color: white;
  /* 用flex排版代替浮动，适配稳定性更高 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.grid-dvr .grid-image {
  max-width: 150px;
  order: 2;
}
.grid-dvr .grid-image img {
  /* 图片自适应容器，不会溢出 */
  max-width: 100%;
  height: auto;
}

.grid-box-heading {
  margin: 0;
  order: 1;
}

.grid-box-description {
  font-size: 12px;
  margin: 0;
  width: 100%;
  order: 3;
}

/* 小屏（<576px，对应Bootstrap sm断点以下）自定义max-width */
@media (max-width: 575.98px) {
  .grid-dvr {
    /* 可根据需求修改为固定值，比如180px */
    max-width: calc(50% - 10px);
    height: auto;
    padding: 10px;
  }
  .grid-dvr .grid-image {
    max-width: 80px;
    margin: 10px 0;
  }
}

额外说明

• 原HTML无需修改，保留现有栅格结构和.w-100换行元素即可
• 如果你需要调整小屏最大宽度，直接修改媒体查询中max-width的属性值即可，百分比和固定像素值都支持

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