Angular4集成Bootstrap时登录页面底部Div显示白色异常问题

嘿，针对你遇到的登录页底部div出现白色异常的问题，结合你给出的代码片段，我整理了几个最可能的原因和对应的解决办法：

1. 背景图片路径解析错误（最常见） #

在Angular的路由页面（比如/login）中，相对路径../assets/img/test.jpg的解析会因为当前路由路径而变化——浏览器会把它解析为/login/../assets/img/test.jpg，虽然理论上等价于/assets/img/test.jpg，但有时候会因为Angular的路由机制或者服务器配置出现加载失败的情况，导致背景图不显示，自然就露出了默认的白色背景。

解决办法：改用绝对路径引用背景图，把路径改成/assets/img/test.jpg（开头加斜杠，指向项目根目录下的assets文件夹）：

<div class="row" style="background-image: url(/assets/img/test.jpg)">

如果是用Angular CLI的项目，这种绝对路径的方式是最可靠的，不管当前路由是什么，都能正确找到图片资源。

2. 容器高度不足导致留白 #

如果你的登录页内容没有撑满整个浏览器视口，那么底部就会出现空白区域。Bootstrap的row类本身不会自动占满视口高度，所以需要手动设置高度。

解决办法：给包含背景图的row元素添加min-height: 100vh样式（100vh表示占满当前视口的高度）：

<div class="row" style="background-image: url(/assets/img/test.jpg); min-height: 100vh;">

另外，还要确保这个row的父元素（比如body或者外层容器）没有设置多余的margin/padding，避免挤压导致底部留白。

3. Bootstrap默认样式的冲突 #

Bootstrap的navbar和container类可能自带一些margin或者padding，导致底部出现空白。比如navbar可能有默认的底部margin，或者container-fluid的padding影响了布局。

解决办法：检查并覆盖这些默认样式，比如给navbar添加Bootstrap内置的mb-0类（用于设置margin-bottom为0）：

<nav class="container navbar mb-0">

或者自定义样式强制去掉多余间距：

.navbar {
    margin-bottom: 0 !important;
}

你可以先从检查背景图是否正确加载开始（打开浏览器开发者工具的Network面板，查看test.jpg的请求状态），如果图片加载失败，优先解决路径问题；如果图片加载正常，再调整容器高度和样式间距。

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