如何调整HTML页面每行Tile数量？Bootstrap布局求助

核心问题定位 #

你现在每行只能放3个卡片，大概率是单个卡片的宽度占比设置过高（比如33.33%），或者没有正确处理盒模型导致宽度溢出，无法容纳4个卡片。

具体修复步骤 #

1. 确保容器的Flex布局配置正确

先检查卡片容器的CSS，必须开启换行，否则卡片会强行挤在一行或者溢出：

.tile-container {
  display: flex;
  flex-wrap: wrap; /* 关键：超出容器宽度时自动换行 */
  margin: 0 -10px; /* 抵消卡片的左右内边距/外边距，避免容器横向溢出 */
}

2. 调整单个卡片的宽度与盒模型

把每个卡片的宽度设为25%，同时开启border-box确保内边距和边框不会额外增加宽度：

.tile {
  width: 25%; /* 每行4个的基础占比 */
  box-sizing: border-box; /* 核心：让padding/border包含在宽度内 */
  padding: 0 10px; /* 卡片之间的间距，可根据需求调整 */
  margin-bottom: 20px; /* 上下行的间距 */
}

如果你的卡片用了**外边距（margin）**而不是内边距，需要用calc()计算宽度，比如每个卡片左右各10px margin：

.tile {
  width: calc(25% - 20px); /* 减去左右margin的总宽度 */
  margin: 0 10px 20px;
  box-sizing: border-box;
}

3. 排查额外的容器限制

如果调整后还是不行，检查以下几点：

• 容器是否设置了固定宽度（比如width: 900px），导致无法容纳4个25%宽度的卡片
• 卡片是否有额外的min-width属性，强制最小宽度超过25%的容器占比
• 容器是否有横向的padding，需要把卡片宽度的计算值对应减少（比如容器左右各20px padding，卡片宽度设为calc(25% - 20px)）

可选：响应式适配 #

如果需要在小屏幕上自动调整每行数量，添加媒体查询：

/* 平板屏幕每行2个 */
@media (max-width: 768px) {
  .tile {
    width: 50%;
    /* 如果用了calc，改成calc(50% - 20px) */
  }
}

/* 手机屏幕每行1个 */
@media (max-width: 480px) {
  .tile {
    width: 100%;
    /* 如果用了calc，改成calc(100% - 20px) */
  }
}

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