Bootstrap如何对齐内容完成LinkedIn页面复刻布局

现有代码核心问题 #

• 栅格系统规则误用：Bootstrap默认单行.row最多承载12等份宽度的列，现有代码在同一级行内放置了5个.col-sm-4（单元素占4份，总占比20份），超出宽度的列会被浏览器自动换行，完全无法匹配LinkedIn左中右三栏的基础布局结构。
• HTML结构不符合规范：<h1>直接嵌套在<ul>内部属于非法写法，列表标签内仅允许放置<li>子元素；页脚零散文本未用块级标签包裹，默认渲染会出现排版错乱。
• 层级嵌套逻辑错误：联系人卡片模块没有被包裹在中间内容区的列容器内，和左侧边栏列处于同一层级，自然无法落到指定的中间矩形区域。

布局核心规则 #

Bootstrap栅格遵循容器>行>列的严格嵌套逻辑：列必须是行的直接子元素，列内部如果需要拆分更小的区块，要在列内新建行容器，再放置内部列，禁止把不同层级的列全部堆在同一级行下。

修正后基础布局代码 #

<div class="container">
    <div class="row">
        <!-- 左侧边栏：按LinkedIn实际比例分配3份宽度 -->
        <div class="col-sm-3">
            <h1>Gérer mon réseau</h1>
            <ul>
                <li><a href="#">Relation</a></li>
                <li><a href="#">Contacts</a></li>
                <li><a href="#">Personnes que je suis</a></li>
                <li><a href="#">Événements</a></li>
                <li><a href="#">Pages</a></li>
                <li><a href="#">Newsletter</a></li>
                <li><a href="#">Hashtag</a></li>
            </ul>
            <img src="image1.jpg" alt="网络推广模块">
            <p>Développez votre réseau</p>
            <!-- 页脚文本用块级容器包裹，避免排版错乱 -->
            <div class="site-footer">
                <p>Infos &nbsp;&nbsp; Accessibilité</p>
                <p>Assistance clientèle</p>
                <p>Conditions générales et confidentialité</p>
                <p>Préférences Pubs &nbsp;&nbsp; Publicité</p>
                <p>Solutions professionnelles</p>
                <p>Téléchargez l'application Linkedin Plus</p>
                <br>
                <p>LinkedIn LinkedIn corporation 2022</p>
            </div>
        </div>
        <!-- 中间内容区：分配6份宽度，内部嵌套行放置联系人卡片 -->
        <div class="col-sm-6">
            <div class="row">
                <!-- 单张卡片占6份宽度，一行刚好放2张，匹配设计图布局 -->
                <div class="col-sm-6">
                    <h3>Ines H</h3>
                    <p>Web Developper</p>
                </div>
                <div class="col-sm-6">
                    <h3>Ines H</h3>
                    <p>Web Developper</p>
                </div>
                <div class="col-sm-6">
                    <h3>Ines H</h3>
                    <p>Web Developper</p>
                </div>
                <div class="col-sm-6">
                    <h3>Ines H</h3>
                    <p>Web Developper</p>
                </div>
            </div>
        </div>
        <!-- 右侧边栏：分配3份宽度，预留后续内容填充位 -->
        <div class="col-sm-3">
            <!-- 后续补充右侧边栏相关模块 -->
        </div>
    </div>
</div>

实操技巧 #

• 写布局前先拆分大区块，先搭完最外层三栏框架，确认三栏宽度占比总和为12、位置匹配设计图后，再逐栏填充内部内容，不要一开始就把所有小模块堆在同一层级。
• 每写完一层结构就打开浏览器开发者工具查看元素边界，确认当前区块位置符合预期后再写下一层，避免全部代码写完后难以定位错位问题。
• 严格遵守嵌套规则：.row的直接子元素只能是.col-*列，列内部要拆分区域必须新增.row容器后再放内部列，不要跨层级放置列元素。

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