使用Bootstrap嵌套行布局遇阻：无法将橙子图片放在西瓜图片旁

你的核心问题是第一行的列宽度总和超过了Bootstrap网格的12列限制（3+3+6+3=15），导致橙子图片被挤到了下一行。要让橙子和西瓜横向并排，需要把它们放到同一个父列里，通过嵌套行来实现。

修正后的代码如下：

<div class="box">
    <div class="container-fluid">
        <!-- 第一行：左侧两个小图 + 右侧西瓜+橙子 -->
        <div class="row">
            <!-- 左侧区域：占6列，包含两个3列的小图 -->
            <div class="col-6">
                <div class="row">
                    <div class="col-3">
                        <img src="mirtilli.png" style="width:100%; height:auto;">
                    </div>
                    <div class="col-3">
                        <img src="fragole.png" style="width:100%; height:auto;">
                    </div>
                </div>
            </div>
            <!-- 右侧区域：占6列，嵌套行放西瓜和橙子 -->
            <div class="col-6">
                <div class="row">
                    <div class="col-8">
                        <img src="/anguria.png" style="width:100%; height:auto;">
                    </div>
                    <div class="col-4">
                        <img src="/arance.png" style="width:100%; height:auto;">
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二行：木瓜和菠萝各占6列 -->
        <div class="row">
            <div class="col-6">
                <img src="/papaya.png" style="width:100%; height:auto;">
            </div>
            <div class="col-6">
                <img src="/ananas.png" style="width:100%; height:auto;">
            </div>
        </div>
    </div>
</div>

关键调整点： #

• 把左侧的两个小图放到一个col-6容器内，内部嵌套row来排列，避免和右侧区域的布局冲突
• 右侧的西瓜和橙子统一放到col-6容器内，通过嵌套row分配列宽（这里用了col-8和col-4，你可以根据参考图的比例调整为col-9和col-3等，只要列宽总和为12即可）
• 给图片加上width:100%; height:auto;样式，让图片自适应容器宽度，避免布局错乱

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