Bootstrap左右布局模板如何快速搭建？-网站模板-锦华智联科技

区

这是最经典、最常用的布局，侧边栏固定不动，主内容区可以独立滚动。

（图片来源网络，侵删）

特点：

侧边栏固定宽度,始终可见，区宽度自适应，内容过长时可滚动。
响应式：在小屏幕上，侧边栏会隐藏，通过汉堡菜单触发。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 左右布局模板</title>
    <!-- 1. 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，使侧边栏和主内容区高度一致 */
        html, body {
            height: 100%;
        }
        .wrapper {
            display: flex;
            height: 100%;
        }
        .sidebar {
            width: 250px; /* 侧边栏宽度 */
            background-color: #f8f9fa; /* 背景色 */
            border-right: 1px solid #dee2e6;
            height: 100%;
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            overflow-y: auto; /* 内容过长时滚动 */
        }
        .main-content {
            flex-grow: 1; /* 主内容区占据剩余空间 */
            margin-left: 250px; /* 左边距等于侧边栏宽度 */
            padding: 20px;
            height: 100%;
            overflow-y: auto; /* 主内容区滚动 */
        }
        /* 响应式调整：当屏幕小于 768px 时 */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                margin-left: -100%; /* 默认隐藏 */
                transition: margin-left 0.3s ease-in-out;
            }
            .sidebar.show {
                margin-left: 0; /* 点击菜单后显示 */
            }
            .main-content {
                margin-left: 0; /* 移动端左边距归零 */
            }
        }
    </style>
</head>
<body>
<div class="wrapper">
    <!-- 侧边栏 -->
    <nav id="sidebar" class="sidebar">
        <div class="position-sticky pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        <span data-feather="home"></span>
                        首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="file"></span>
                        文档
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="shopping-cart"></span>
                        商店
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="users"></span>
                        用户
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 顶部导航栏 (移动端显示) -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light d-md-none">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Logo</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarToggle">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </nav>
        <div class="container-fluid">
            <h1>主内容区</h1>
            <p>这里是主要内容，可以滚动。</p>
            <!-- 添加一些占位内容，以便演示滚动效果 -->
            <div style="height: 1500px; background-color: #e9ecef; text-align: center; padding-top: 700px;">
                滚动我试试...
            </div>
        </div>
    </main>
</div>
<!-- 2. 引入 Bootstrap JS 和 Popper.js (必需) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 3. 引入 Feather Icons (如果使用了图标) -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
    // 初始化 Feather 图标
    feather.replace();
    // 侧边栏切换逻辑 (纯JS实现，与Bootstrap的Collapse组件无关)
    document.addEventListener('DOMContentLoaded', function () {
        const sidebar = document.getElementById('sidebar');
        const toggleBtn = document.querySelector('.navbar-toggler');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function () {
                sidebar.classList.toggle('show');
            });
        }
    });
</script>
</body>
</html>

顶部导航栏 + 底部固定侧边栏

这种布局适合主内容区非常短,或者侧边栏信息需要一直展示在页面底部的情况。

特点：

（图片来源网络，侵删）

顶部导航栏固定。
侧边栏固定在底部,区在中间。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 顶部+底部布局</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        .main-content {
            flex-grow: 1; /* 主内容区占据所有可用空间 */
            padding: 20px;
            background-color: #f5f5f5;
        }
        .bottom-sidebar {
            height: 200px; /* 底部侧边栏高度 */
            background-color: #343a40;
            color: white;
            padding: 20px;
        }
        /* 响应式：在小屏幕上，底部侧边栏可能变为顶部 */
        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }
            .bottom-sidebar {
                height: auto;
                order: -1; /* 移动端时将其放在最上面 */
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">顶部导航</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">链接</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主内容区 -->
    <main class="main-content">
        <div class="container">
            <h1>主内容区</h1>
            <p>这个区域会自动拉伸以填充可用空间。</p>
        </div>
    </main>
    <!-- 底部侧边栏 -->
    <aside class="bottom-sidebar">
        <h5>底部信息栏</h5>
        <p>这里是一些固定显示在底部的内容。</p>
    </aside>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

使用 Flexbox 的现代布局

这是更现代、更灵活的布局方式，主要依赖 CSS Flexbox 而不是固定定位，它对响应式设计非常友好。

特点：

使用 Flexbox 实现三栏布局。
侧边栏和主内容区可以同时滚动。
代码更简洁,易于调整。

代码实现：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap Flexbox 布局</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 移除 body 的默认边距，设置高度为 100% */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* 使用 Flexbox 布局 */
        .flex-container {
            display: flex;
            height: 100vh; /* 视口高度 */
        }
        /* 左侧边栏 */
        .flex-sidebar-left {
            width: 250px;
            background-color: #e9ecef;
            padding: 20px;
            flex-shrink: 0; /* 防止侧边栏被压缩 */
        }
        /* 右侧边栏 */
        .flex-sidebar-right {
            width: 200px;
            background-color: #f8f9fa;
            padding: 20px;
            flex-shrink: 0; /* 防止侧边栏被压缩 */
        }
        /* 主内容区 */
        .flex-main {
            flex-grow: 1; /* 占据所有剩余空间 */
            padding: 20px;
            background-color: #ffffff;
            overflow-y: auto; /* 内容过长时滚动 */
        }
        /* 响应式：在小屏幕上，侧边栏变为顶部导航 */
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column; /* 改为垂直排列 */
            }
            .flex-sidebar-left, .flex-sidebar-right {
                width: 100%; /* 宽度占满 */
                height: auto; /* 高度自适应 */
                order: 2; /* 调整顺序，主内容区在中间 */
            }
            .flex-main {
                order: 1; /* 主内容区在最上面 */
            }
        }
    </style>
</head>
<body>
<div class="flex-container">
    <!-- 左侧边栏 -->
    <aside class="flex-sidebar-left">
        <h5>左侧边栏</h5>
        <p>一些导航链接或信息。</p>
    </aside>
    <!-- 主内容区 -->
    <main class="flex-main">
        <h1>主内容区</h1>
        <p>这里是页面的主要内容，宽度自适应。</p>
        <!-- 占位内容 -->
        <div style="height: 800px; background-color: #f0f0f0; text-align: center; padding-top: 400px;">
            滚动主内容区...
        </div>
    </main>
    <!-- 右侧边栏 -->
    <aside class="flex-sidebar-right">
        <h5>右侧边栏</h5>
        <p>一些辅助信息或广告。</p>
    </aside>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

总结与选择建议

模板	布局方式	适用场景	优点	缺点
模板一	固定定位	仪表盘、后台管理系统	经典、侧边栏始终可见，用户导航方便	需要处理滚动条和 z-index
模板二	Flexbox (列)	简单页面、信息展示	结构简单，适合少量内容	区高度可能受限
模板三	Flexbox (行)	现代网站、需要多栏布局	极其灵活，响应式处理简单，代码优雅	需要理解 Flexbox 概念

如何选择？

如果你正在构建一个后台管理系统，模板一是最佳选择。
如果你的页面结构很简单,只需要一个固定的顶部和底部，模板二足够了。
如果你想要一个现代化、灵活且易于维护的布局，并且可能需要复杂的响应式行为，模板三是首选。

希望这些模板能帮助你快速开始项目！