如何使用Bootstrap网格系统构建指定布局的仪表板？

你的思路已经贴近需求，不需要采用5行2列的结构，现有布局框架可以优化得更贴合设计逻辑，同时保证响应式表现。

核心布局调整说明 #

• 第一行（Box1+Box2）：你用col-3+col-9的拆分完全匹配设计里的左右占比，保持即可。
• 第二行（两个Box3）：原代码的两个col-2实现了左对齐的小模块，符合布局需求；如果希望和下方Box4/Box5的宽度完全对齐，也可以把两个Box3放在同一个col-4容器内，用Flex布局控制横向排列，灵活度更高。
• 第三行（Box4+Box5与Box6）：col-4垂直堆叠Box4和Box5、col-8放置Box6的结构完全符合设计，是Bootstrap网格嵌套的合理用法，比额外新增一行更简洁。
• 第四行（Box7）：col-12通栏的设置正确，满足底部全宽模块的需求。

优化后的完整代码 #

我补充了布局可视化样式（方便你直观看到区域边界）、完善了表格结构，并修复了代码细节：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <style>
        /* 仅用于可视化布局边界，实际项目可删除 */
        .dashboard-box {
            padding: 1.5rem;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container-fluid p-3">
        <!-- 第一行：Box1 + Box2 -->
        <div class="row mb-3">
            <div class="col-3 d-flex justify-content-center align-items-center dashboard-box">
                <img src="foo.png" alt="Box 1">
            </div>
            <div class="col-9 dashboard-box">
                Box 2
            </div>
        </div>

        <!-- 第二行：两个Box3 -->
        <div class="row mb-3">
            <div class="col-2 dashboard-box">
                Box 3
            </div>
            <div class="col-2 dashboard-box">
                Box 3
            </div>
        </div>

        <!-- 第三行：Box4+Box5 与 Box6 -->
        <div class="row mb-3">
            <div class="col-4">
                <div class="dashboard-box mb-3">
                    <table class="table table-bordered">
                        <tbody>
                            <tr><td>Box 4</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="dashboard-box">
                    <table class="table table-bordered">
                        <tbody>
                            <tr><td>Box 5</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-8 dashboard-box">
                Box 6
            </div>
        </div>

        <!-- 第四行：Box7通栏 -->
        <div class="row">
            <div class="col-12 d-flex justify-content-center align-items-center dashboard-box">
                Box 7
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

额外提示 #

1. 响应式适配：如果需要在移动端自动调整布局，把固定宽度的col-*替换为响应式类（比如col-md-3、col-md-9），小屏幕下模块会自动垂直堆叠。
2. 样式自定义：.dashboard-box只是辅助布局调试的样式，实际项目中可以根据需求替换为自定义的背景、阴影等样式。

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