Bootstrap Cover页面适配问题：移动端阴影异常/桌面高度不足

• 用响应式高度替代固定h-100
  移除html、body标签上的h-100类，通过自定义CSS实现桌面端全屏高度：

  @media (min-width: 768px) {
    html, body {
      height: 100%;
    }
  }
  

  这样桌面端（≥768px）页面会铺满视口，移动端则随内容自动撑开高度，box-shadow就能跟随实际内容高度变化。

• 修复网格行间距
  将网格的行间距类替换为垂直方向专用的gy-*（比如gy-4），替代通用的g-*。gy-*会在所有屏幕尺寸下保持垂直间距，避免单列布局时间距消失：

  <div class="row gy-4">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
  </div>
  

• 确保阴影容器随内容自适应
  把box-shadow应用在包裹内容的容器（比如<main>或自定义内容容器）上，而非固定高度的父元素。确保容器未设置固定height，让它随内部内容自动撑开：

  .content-container {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    /* 其他自定义样式 */
  }
  

• 调整Cover模板的flex布局
  若使用了Cover模板的flex布局，给桌面端的主容器添加响应式flex类，确保桌面端内容垂直居中且占满高度，移动端保持流式布局：

  <main class="px-3 d-md-flex flex-md-column h-md-100">
    <!-- 页面内容 -->
  </main>
  

  这里的d-md-flex、flex-md-column、h-md-100仅在桌面端生效，不影响移动端的内容排版。

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