本文详解 bootstrap 登录页因侧边栏宽度与布局错位导致页面仅显示一半、底部留白的典型问题，提供 css 修复方案、响应式优化及结构建议，确保登录表单在所有视口下均能自适应并垂直居中。
在使用 bootstrap 构建登录页时，一个常见却易被忽视的问题是：页面未真正“全屏”展示，而是只占据视口上半部分，下方大片区域留白（如截图所示）。根本原因在于 css 布局逻辑冲突——尤其是 .sidenav 和 .main 的尺寸与定位策略不匹配。
? 问题根源分析
原始代码中存在两个关键布局缺陷：
- .sidenav 在 min-width: 768px 媒体查询中被设为 width: 40%，但未设置其父容器或 body 的高度约束，导致它仅按内容撑高；
- .main 被赋予 margin-left: 40%，意图实现左右分栏，但该偏移并未配合高度控制，且 .main 自身未设 height: 100vh 或 display: flex 等全高机制，最终造成视觉“截断”。
更严重的是：html 结构中，.main 被嵌套在 .sidenav 内部（即
…
…
），这违背了语义化布局原则——侧边栏（sidenav）本应是独立容器，而非包裹主内容的父元素。
✅ 正确解决方案
1. 重构 HTML 结构（语义清晰、层级合理）
Chartcel
Login Page
Login or register to upload your spreadsheet.
✅ 关键改进： .sidenav 与 .main 并列于 下，避免嵌套误导； 使用 Bootstrap 5 的 h-100, d-flex, justify-content-center, align-items-center 实现真·垂直+水平居中； 移除冗余 margin-top 百分比（易受内容高度影响），改用 Flex 布局自动对齐。
2. 优化核心 CSS（精简、健壮、响应式）
/* 重置基础 */ html, body { height: 100%; margin: 0; } /* 左侧导航栏：固定宽高，适配全屏 */ .sidenav { position: fixed; top: 0; left: 0; width: 40%; height: 100vh; background-color: #000; color: white; padding: 20px; overflow-y: auto; z-index: 100; } .login-main-text { padding: 60px 30px; } .login-main-text h2 { font-weight: 300; line-height: 1.3; } /* 主内容区：占满剩余空间 */ .main { margin-left: 40%; height: 100vh; background-color: #f8f9fa; } /* 表单增强样式 */ .login-form { border-radius: 8px; } .form-label { font-weight: 500; } .btn-black { background-color: #000 !important; color: #fff; border: none; } /* 响应式降级：小屏时隐藏侧边栏，专注表单 */ @media (max-width: 768px) { .sidenav { display: none; } .main { margin-left: 0; } .login-form { margin: 0 15px; } }3. 注意事项与最佳实践
- ❌ 避免在 .sidenav 内嵌套 .main：这会导致布局计算混乱，且不利于可访问性与 seo；
- ✅ 始终为 html 和 body 设置 height: 100%，这是 100vh 正常工作的前提；
- ✅ 使用 flex 或 grid 替代 margin-top: XX%：后者依赖于父容器高度估算，极易失准；
- ✅ 小屏优先：移动设备上应隐藏侧边栏，聚焦登录流程，提升转化率；
- ✅ 添加 overflow-y: auto 到 .sidenav，防止长文本溢出不可滚动。
通过以上调整，你的登录页将真正实现：
- 桌面端：左侧品牌区（40% 宽）+ 右侧居中表单（60% 宽），全高填充；
- 移动端：简洁单列表单，无干扰，触控友好；
- 语义清晰、维护性强、符合现代 CSS 最佳实践。
最后提醒：Bootstrap 5+ 已弃用 col-md-6 col-sm-12 中的 col-sm-12（默认即 12 列），建议统一使用 col-md-5 等语义化类，并配合 w-100 或 mx-auto 控制宽度。