Bootstrap网格嵌套布局问题：新手实现不符预期求助

你的核心问题是栅格结构层级错误，加上引号混用导致样式识别异常，具体修正点和代码如下：

错误分析 #

1. 最外层的container-fluid被提前闭合，导致后续的row不在容器内部——Bootstrap栅格要求所有row必须包裹在container/container-fluid中才能正常生效。
2. 代码混用了中文单引号（’）和英文引号，浏览器无法正确识别这类不规范引号，会导致类名失效。

修正后的代码 #

<div class="container-fluid">
    <div class="row">
        <!-- 左侧占3列的区域 -->
        <div class="col-sm-3 bg-primary">
            <img src="images/about.jpg" class="imageAboutPage" alt="">
        </div>
        <!-- 右侧自动填充剩余宽度的区域 -->
        <div class="col">
            <!-- 右侧内部的行，包含两个等分列 -->
            <div class="row">
                <div class="col bg-primary">Lorem ipsum dolor.</div>
                <div class="col bg-secondary">Lorem ipsum dolor.</div>
            </div>
        </div>
    </div>
</div>

关键说明 #

Bootstrap栅格系统必须遵循**容器（container/container-fluid）→ 行（row）→ 列（col）**的嵌套逻辑：

• 容器负责控制页面最大宽度和内边距
• 行用于抵消列的内边距，确保布局对齐
• 列是内容的直接载体，列内部可再次嵌套行和列，实现复杂布局

修正后所有元素会被包裹在同一个容器内，形成完整的整体布局，与你期望的效果匹配。

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