Bootstrap 3布局问题：如何实现两侧col-sm-3中间col-sm-6的排列

嘿，这个需求用Bootstrap的栅格系统就能轻松搞定！核心就是利用它12列的布局规则——3+6+3刚好填满一行的12列，直接按顺序嵌套就行，我给你写个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两侧3列中间6列布局</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 外层容器，可选container（固定宽度）或container-fluid（全屏宽度） -->
    <div class="container my-4">
        <!-- Bootstrap行容器，用于包裹列 -->
        <div class="row">
            <!-- 左侧栏：占3列，sm及以上屏幕生效 -->
            <div class="col-sm-3 bg-light p-3 border">
                左侧内容区
            </div>
            <!-- 中间主内容：占6列，自动居中（左右3列撑满行宽） -->
            <div class="col-sm-6 bg-white p-3 border">
                中间主内容区，这部分会自动居中显示
            </div>
            <!-- 右侧栏：占3列，sm及以上屏幕生效 -->
            <div class="col-sm-3 bg-light p-3 border">
                右侧内容区
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS（如需交互组件则保留） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键细节说明： #

• 所有列必须放在row容器内，它会自动处理列之间的间距，避免布局错位。
• 外层的container是推荐使用的，它会给内容添加合适的水平边距；如果想要全屏无边距布局，换成container-fluid即可。
• col-sm-*表示在屏幕宽度≥576px（Bootstrap的sm断点）时生效，小于这个宽度时，三个列会自动垂直堆叠；如果想要移动端也保持横向排列，把col-sm-3改成col-3、col-sm-6改成col-6就行。
• 要是不需要两侧栏有内容，只留空白占位，直接删掉col-sm-3里的内容即可，它依然会占据对应宽度，保证中间列居中。

内容的提问来源于stack exchange，提问作者Позитив онлайн