如何在Bootstrap网格中动态调整列宽

一、CSS Flexbox 实现（推荐） #

通过Flex布局让列自动均分容器宽度，适配任意数量的学生列：

<!-- HTML结构 -->
<div class="student-container">
  <div class="student-column">学生1</div>
  <div class="student-column">学生2</div>
  <div class="student-column">学生3</div>
  <!-- 动态添加更多学生列即可 -->
</div>

/* CSS样式 */
.student-container {
  display: flex;
  width: 100%;
}

.student-column {
  flex: 1; /* 核心：每个列自动平分容器宽度 */
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

二、CSS Grid 实现 #

适合需要更精细布局控制的场景，同样支持动态列数：

<!-- HTML结构 -->
<div class="student-grid">
  <div class="student-item">学生A</div>
  <div class="student-item">学生B</div>
  <div class="student-item">学生C</div>
</div>

/* CSS样式 */
.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 自动适配列数并均分宽度 */
  gap: 10px; /* 列之间的间距 */
}

.student-item {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

三、响应式适配（可选） #

如果需要在移动端自动换行调整列数，可添加媒体查询：

Flex版响应式：

@media (max-width: 768px) {
  .student-container {
    flex-wrap: wrap;
  }
  .student-column {
    flex: 0 0 50%; /* 小屏幕每行显示2列 */
    margin-bottom: 10px;
  }
}

Grid版响应式：

@media (max-width: 768px) {
  .student-grid {
    grid-template-columns: repeat(2, 1fr); /* 小屏幕固定2列 */
  }
}

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