如何用Bootstrap网格实现左侧单div、其余div居右的布局？

需求说明 #

• 大屏设备：左侧显示广告div，产品卡片在右侧布局
• 中小屏设备：广告div正常显示，产品卡片自适应调整布局
• 最小屏设备：广告div隐藏，产品卡片占满页面宽度

原代码问题分析 #

1. 网格嵌套错误：父row内直接嵌套row，不符合Bootstrap网格规则（row必须放置在col容器中）
2. 类名语法错误：article标签里的.d-none .d-md-block多了冗余的点号，正确写法应为d-none d-md-block
3. 列宽设置不合理：col-lg-1 col-md-1会让广告div被压缩成窄条；产品卡片的style="width:20%"会覆盖Bootstrap的响应式列宽逻辑
4. 间距干扰：ml-2这类自定义边距会破坏网格的自动间距分配

修正后的代码 #

_Layout.html（无需修改） #

<div class="container-fluid">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

页面代码 #

<h4 class="text-center mt-3 mb-2">Onze shirts:</h4>
<!-- 外层网格行，用g-3设置统一间距 -->
<div class="row g-3">
    <!-- 广告区域：md及以上显示，xs隐藏；适配不同大屏宽度 -->
    <article class="border border-info d-none d-md-block col-md-4 col-lg-4 col-xl-3">
        Hier komt de reclame te staan
    </article>
    <!-- 产品容器：占剩余宽度，内部嵌套卡片网格 -->
    <div class="col-12 col-md-8 col-lg-8 col-xl-9">
        <div class="row g-3">
            @foreach (Models.Product product in Model.producten)
            {
                <!-- 产品卡片：xs满宽，sm/md一行2个，xl一行3个 -->
                <div class="col-12 col-sm-6 col-md-6 col-xl-4">
                    <div class="border border-info text-center p-3 h-100 d-flex flex-column justify-content-center">
                        <p><img src='Images\@product.Afbeelding' height="75" width="60" /></p>
                        <p>@product.Naam</p>
                        @if (product.Aanbieding != 0)
                        {
                            <p>van: <del>€@product.Prijs</del> voor: €@product.Aanbieding</p>
                        }
                        else
                        {
                            <p>voor: €@product.Prijs</p>
                        }
                        <p><a class="btn btn-primary" href="~/Bestel?artikelnummer=@product.Id">bestel</a></p>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

代码说明 #

1. 网格结构：外层row拆分广告列与产品容器列，产品容器内部再用row布局卡片，完全符合Bootstrap嵌套规则
2. 响应式逻辑：
   • 广告div：d-none d-md-block实现最小屏隐藏、中大屏显示；列宽col-md-4 col-lg-4 col-xl-3适配不同大屏的宽度比例
   • 产品容器：col-12保证最小屏下满宽，col-md-8等对应广告列的剩余宽度
   • 产品卡片：col-12 col-sm-6 col-md-6 col-xl-4实现「最小屏1列、中小屏2列、大屏3列」的自适应布局
3. 样式优化：用g-3统一网格间距，去掉冗余边距类；产品卡片内部用flex布局保证内容垂直居中、卡片高度一致

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