Bootstrap5：如何让顶部/底部静态栏在橙色框内响应式显示并嵌入Codepen示例？

一、布局问题修复（顶部/底部栏固定在橙色框内+响应式适配） #

核心问题是原固定定位脱离了容器，导致无法跟随橙色框（.Main）适配。改用绝对定位+容器相对定位的方式，配合Bootstrap响应式工具类即可解决。

修改后的完整代码 #

HTML

<div class="Main container mx-auto">
  <div class="TopBar col-12 px-0">
    <!-- 可添加按钮 -->
    <button class="btn btn-primary m-2">操作按钮</button>
    <img src="images/TopBar.png" class="img-fluid">
  </div>
  
  <!-- 主体内容区，预留栏位空间避免遮挡 -->
  <div class="Content p-4">
    这里是页面主体内容，不会被顶部/底部栏遮挡
  </div>
  
  <div class="BottomBar col-12 px-0">
    <img src="images/BottomBar.png" class="img-fluid">
  </div>
</div>

CSS

body {
  background-image: url('images/wbg.jpg');
  background-position: center top;
  margin: 0;
}

.Main {
  border: 5px solid white;
  background-image: url('images/ob.jpg');
  background-position: center top;
  background-size: 100% auto;
  max-width: 100%; /* 手机端占满屏幕 */
  box-shadow: 2px 3px 8px 0px #a09999;
  position: relative; /* 作为绝对定位的父容器 */
  min-height: 100vh; /* 容器至少占满视口高度 */
  padding-top: 60px; /* 适配顶部栏高度，按需调整 */
  padding-bottom: 60px; /* 适配底部栏高度，按需调整 */
}

/* 大屏设备（≥768px）下橙色框居中，最大宽度800px */
@media (min-width: 768px) {
  .Main {
    max-width: 800px;
  }
}

.TopBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff; /* 可选：添加背景防止内容穿透 */
}

.BottomBar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff; /* 可选：添加背景 */
}

关键修改说明 #

• 定位逻辑调整：将.TopBar/.BottomBar的fixed改为absolute，同时给.Main设置position: relative，让栏位始终相对于橙色框定位，不会脱离容器。
• 响应式适配：
  • 手机端默认.Main占满屏幕，实现移动应用样式；
  • 大屏设备通过媒体查询限制最大宽度为800px，配合Bootstrap的mx-auto类实现居中。
• 内容防遮挡：给.Main添加上下内边距，避免主体内容被栏位覆盖，数值根据栏位实际高度调整。
• 宽度自适应：移除硬编码的width:85.3%，改用left:0; right:0让栏位自动继承容器宽度，无需手动计算比例。

二、Codepen 可运行示例嵌入方法 #

要在页面中直接展示可运行示例而非跳转链接，使用Codepen的嵌入工具生成iframe代码即可：

1. 打开目标Codepen项目页面，点击右上角「Embed」按钮；
2. 在弹出的设置窗口中选择显示样式（如仅预览或代码+预览）；
3. 复制生成的iframe代码，直接粘贴到HTML页面中。

示例嵌入代码（适配你的项目）：

<iframe height="300" style="width: 100%;" scrolling="no" title="Bootstrap Fixed Bar Layout" src="https://codepen.io/PapaDeBeau/embed/MYgyBRJ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/PapaDeBeau/pen/MYgyBRJ">Bootstrap Fixed Bar Layout</a> by Papa De Beau (<a href="https://codepen.io/PapaDeBeau">@PapaDeBeau</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>

这段代码会直接在页面渲染可运行的预览区域，无需跳转外部网站。

内容的提问来源于stack exchange，提问作者Papa De Beau