Question

我希望我的登录屏幕是一张卡片，具有整个屏幕的大小，并带有背景图像和覆盖层。调整浏览器大小时，可以在图像下方看到空白。我希望图像可以根据浏览器大小进行调整。

<div class="card text-white">
    <img class="card-img" src="../../../assets/login-image/home.jpg">
    <div class="card-img-overlay">
          <div class="display-4 title">Acqusitions</div>
      <div class="card-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8">
            </div>
            <div class="col-md-4">
              <div>
                <h2 class="card-title">Login</h2>
                <div class="forms">
                  <div class="card-text input-group input-group-lg username">
                    <input type="text" class="form-control" placeholder="Username" [(ngModel)]="username">
                  </div>
                  <div class="card-text input-group input-group-lg password">
                    <input type="password" class="form-control" placeholder="Password" [(ngModel)]="password">
                  </div>
                  <div class="text-center buttonPad">
                    <button type="button" class="btn btn-primary btn-lg" (click)="loginUser(username, password)">Submit</button>
                  </div>
                  <div *ngIf="loginError" class="padTop" class="alert alert-danger" role="alert">
                    {{errMessage}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

.card {
  height: 100vh;
}

还要确保已设置<meta name="viewport" content="width=device-width, height=device-heigth, initial-scale=1">，以便浏览器获取视口大小并将其应用于内容。您还可以将基本100vh添加到body（使用类而不是使用html标签添加样式），然后在需要时使用height：100％。

过分依赖引导程序（特别是如果您是新手）的问题是css规则变得混乱（因为引导程序的样式心态与css不同）。我建议您尝试自己（手动）做一些包含boostrap-included的类的东西，然后使用bootstrap作为节省时间的方法，而不是使用它，因为它更容易。您必须知道它的作用以及作用方式。

我个人不喜欢引导程序，因为有些事情在不使用'！important'的情况下无法覆盖，这很可怕，或者消除了封装，但这是个人的和不合主题的。希望对您有帮助！

如何使引导卡整个组件都高度？

1 个答案: