【发布时间】：2020-05-22 23:34:48
【问题描述】：
我将 Angular Bootstrap 用于开发目的。
当我在浏览器中显示时，页面底部出现空白 - 而且 - 我没有看到原因。
正在使用的基本代码如下。我进行了以下实际页面上显示的更改（它显示了空白）。
<div class="container-fluid">
<div class="row" style="background-color: burlywood;">
<div class="col-md-9">
Left Box
</div>
<div class="col-md-3">
Right Box
</div>
</div>
</div>
我在下面添加了我正在使用的文件。
我做错了什么？
正在使用的版本
Angular CLI: 8.3.23
Node: 12.14.1
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.803.23
@angular-devkit/build-angular 0.803.23
@angular-devkit/build-optimizer 0.803.23
@angular-devkit/build-webpack 0.803.23
@angular-devkit/core 7.3.8
@angular-devkit/schematics 8.3.23
@angular/cdk 8.0.1
@angular/cli 8.3.23
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.0.1
@angular/material-moment-adapter 8.2.3
@ngtools/webpack 8.3.23
@schematics/angular 8.3.23
@schematics/update 0.803.23
rxjs 6.5.2
typescript 3.4.5
webpack 4.39.2
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Trading</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<router-outlet></router-outlet>
<div class="container-fluid">
<div class="row" style="background-color: burlywood;">
<div class="col-md-9">
Image goes here
</div>
<div class="col-md-3">
<!-- Material form login -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign in</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<!-- Email -->
<div class="md-form">
<input type="email" id="materialLoginFormEmail" class="form-control">
<label for="materialLoginFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialLoginFormPassword" class="form-control">
<label for="materialLoginFormPassword">Password</label>
</div>
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialLoginFormRemember">
<label class="form-check-label" for="materialLoginFormRemember">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign
in</button>
<!-- Register -->
<p>Not a member?
<a href="">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a type="button" class="btn-floating btn-fb btn-sm">
<i class="fab fa-facebook-f"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fab fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fab fa-linkedin-in"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fab fa-github"></i>
</a>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form login -->
</div>
</div>
</div>
【问题讨论】：
-
您检查过检查面板的边距吗？
-
你能提供一些你的问题的stackblitz示例吗？
-
我正在使用 MDBootstrap 和 Angular 材质。我不确定问题是否是由于未使用模块（或不使用）。答案中的信息虽然有所帮助。感谢您的回复。
标签： html css angular bootstrap-4 angular-material