如何根据屏幕尺寸调整Bootstrap每行最大列数？md屏8列、sm屏4列布局异常求助

嘿，我来帮你搞定这个栅格布局的问题！你遇到的核心问题是混用了Bootstrap默认12列的宽度类和自定义列数的row-cols属性，导致两者的宽度计算逻辑冲突，所以md尺寸下布局不符合预期。

问题根源 #

你写的row-cols-md-8是告诉Bootstrap在md屏幕下每行最多显示8列，但后面的col-md-5和col-md-3还是基于默认12列栅格来计算宽度的（5/12和3/12），这两个数值和8列的逻辑不匹配，自然没法让第二列挤到同一行，而且整体还是按12列的规则在渲染。

两种解决方案 #

方案1：用row-cols实现自动列排列（快速简单）

如果你的需求只是“md下每行最多8个列，sm及以下每行4个”，不需要精确的5:3宽度比例，直接用row-cols结合自动列就可以：

<div class="container">
  <div class="row row-cols-4 row-cols-md-8">
    <div class="col bg-primary">Column</div>
    <div class="col bg-secondary">Column</div>
    <!-- 可以继续添加更多列，md下自动每行排8个，sm下每行排4个 -->
  </div>
</div>

这里row-cols-md-8会让每个列自动占1/8的宽度，row-cols-4则让小屏幕下每个列占1/4宽度，完全不需要手动指定col-md-*的数值。

方案2：自定义md尺寸的栅格列数（精确控制宽度比例）

如果你必须保留5:3的宽度比例，那就需要把md尺寸的栅格系统改成8列，这样col-md-5和col-md-3才能正确匹配（5+3=8，刚好占满一行）。

方式A：用Sass编译Bootstrap（推荐）

修改Bootstrap的Sass变量，然后重新编译：

// 设定md屏幕下的栅格列数为8
$grid-columns-md: 8;

// 引入Bootstrap核心样式
@import "bootstrap/scss/bootstrap";

之后你的原始HTML代码就能正常工作了：

<div class="container">
  <div class="row">
    <div class="col-md-5 bg-primary">Column</div>
    <div class="col-md-3 bg-secondary">Column</div>
  </div>
</div>

方式B：手动写CSS覆盖（无需编译）

如果不能用Sass，直接写自定义CSS来覆盖默认样式：

@media (min-width: 768px) {
  /* 针对md屏幕，设置8列的基础规则 */
  .row-cols-md-8 > * {
    flex: 0 0 auto;
    width: calc(100% / 8);
  }
  /* 自定义col-md-5和col-md-3的宽度（基于8列） */
  .col-md-5 {
    flex: 0 0 auto;
    width: calc(5/8 * 100%);
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: calc(3/8 * 100%);
  }
}

这样你的原始HTML结构也能达到预期效果，md尺寸下两个列会并排占满一行。

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