如何仅使用Bootstrap 5.2.3实现指定HTML布局效果？

一、你的代码存在的问题 #

• JS引入语法错误：<body>内的Bootstrap JS代码缺少起始的<script>标签，浏览器无法识别加载该脚本。
• 页面无实际内容：<body>标签内除了错误的JS代码，没有任何用于构建布局的HTML结构，无法呈现目标效果。

二、修正后的基础代码框架 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
    <!-- 在这里添加你的布局内容，比如容器、栅格、组件等 -->
    <div class="container mt-3">
        <!-- 示例：一行两列的响应式栅格布局 -->
        <div class="row">
            <div class="col-md-6 bg-light p-3 border">左侧内容区域</div>
            <div class="col-md-6 bg-secondary text-white p-3 border">右侧内容区域</div>
        </div>
    </div>

    <!-- 正确引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>

</html>

三、匹配目标布局的实现要点 #

• 用container（固定宽度）或container-fluid（全屏宽度）包裹页面内容，实现响应式宽度控制。
• 利用Bootstrap的栅格系统（row+col-*类）划分页面区域，通过col-md-*、col-sm-*等类适配不同屏幕尺寸。
• 根据布局需求直接使用Bootstrap内置组件：比如导航栏用navbar类、卡片用card组件、按钮用btn系列类，无需额外CSS即可实现样式统一。
• 借助间距类（mt-*控制外边距、p-*控制内边距等）调整元素间的间距，优化布局细节。

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