Bootstrap实现移动端、平板、桌面端列数差异化布局问题

你在md断点下的布局异常，核心是内容行的列宽比例和顶部行不匹配：

• 顶部行在md下是8个col，每个列占总宽度的100%/8=12.5%
• 你给内容行加了row-cols-md-8，同时给gutter列设了col-md-1（占1/12≈8.33%）、内容列设了col-md-6（占50%），总宽度仅为66.66%，剩余空间留白，导致布局不符合预期。

移除内容行的row-cols-md-8，改用Bootstrap的flex比例类来匹配顶部行的列宽比例，同时保留xl断点的固定列宽设置：

修正后的完整代码 #

<div class="container">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="d-none d-md-block col">5</div>
        <div class="d-none d-md-block col">6</div>
        <div class="d-none d-md-block col">7</div>
        <div class="d-none d-md-block col">8</div>
        <div class="d-none d-xl-block col">9</div>
        <div class="d-none d-xl-block col">10</div>
        <div class="d-none d-xl-block col">11</div>
        <div class="d-none d-xl-block col">12</div>
    </div>
    <div class="row">
        <div class="d-none d-md-block flex-md-1 col-xl-2">Gutter Column</div>
        <div class="flex-md-6 col-xl-8">Content Column</div>
        <div class="d-none d-md-block flex-md-1 col-xl-2">Gutter Column</div>
    </div>
</div>

关键调整说明 #

1. 移除row-cols-md-8：该类会强制每行显示8列，破坏了自定义列宽比例的需求
2. 添加flex-md-1到gutter列：在md断点下，gutter列的flex增长比例为1，对应顶部行单个列的宽度（1/8）
3. 添加flex-md-6到内容列：在md断点下，内容列的flex增长比例为6，对应顶部行6个列的宽度（6/8），总比例1+6+1=8，完美匹配顶部行的8列布局
4. 保留col-xl-2和col-xl-8：确保xl断点下gutter各占2列、内容占8列，符合12列网格的预期

这样调整后，三个断点的布局都会完全符合预期，且不会影响sm和xl的原有正常布局。

内容的提问来源于stack exchange，提问作者Tyler V.