时间戳

首页 > 解决方案 > Angular : Bootstrap - 如何在从其他组件调用时在组件中使用全高？

html - Angular : Bootstrap - 如何在从其他组件调用时在组件中使用全高？

问题描述

在我的 Angular 应用程序中，我有两个组件：（app.component始终默认创建）和login.component.

我login.component从app.component. 但问题是在登录组件内部设计某些东西时我没有得到完整的高度。结果，当我从 调用login.component时app.component，设计的高度比我预期的要低得多。

那么当我从第一个组件调用它时，如何在我的第二个组件上使用全高呢？

app.component.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" >Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" >Create</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" >Display</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" >Report</a>
      </li>
    </ul>
  </nav>

  <router-outlet></router-outlet>
</body>

</html>

login.component.html

<div style="height: 100%; display: flex; align-items: center; justify-content: center; background-color: #44739d; ">
  <div class="card" style="width: 18rem; height: 100%;">
    <div class="card-body">
      <form>
        <div class="form-group">
          <input type="text" placeholder="Username / Email" class="form-control" id="exampleInputEmail1">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

截屏 ：

在此处输入图像描述

笔记：

1）如您所见，我将整个页面标记为蓝色，我的第二个组件（登录）仅使用页面的上部

2）在我的第二个组件中，我使用 style="height:100%" 仍然无法正常工作。（在此之后，我感觉第一个组件的某些东西挡住了第二个组件的高度，但请看下一点）

3）所以我正在检查我的第一个组件，在 body 中只有一个bootstrap nav-bar和一个angular <router-outlet>。nav-bar没关系，它应该在上面，不应该影响我的设计。我也试过删除它，问题是一样的。现在我调用<router-outlet>?

应该有一个简单的修复，我错过了什么？

[顺便说一下，没有添加.ts代码（内置代码除外），我只是HTML一个ng-bootstrap人设计]

标签： htmlcssangularbootstrap-4ng-bootstrap

解决方案

只需在 HTML 中添加一个容器或容器流体类。

<div class="container-fuild">  
<router-outlet></router-outlet> 
</div>

或者您可以将容器或容器流体添加到您的身体，如下所示

<body>
  <div class="container-fluid">

  <--- your content here --->

  </div>
</body>

参考： https ://getbootstrap.com/docs/4.6/layout/overview/#containers

推荐阅读