angular - Angular 9，在组件中占据全宽

Question

我无法在我的一个角度模板文件中获取内容以占用页面的整个宽度和高度。基本上我得到以下信息：

但我想要这样的东西： 我尝试将我的主 div 作为宽度：100% 放在 template.html 中；但我没有任何区别。也许这与其他组件的样式有关。我不知道如何解决这个问题，任何帮助都会得到帮助！

这是显示的屏幕截图，这里是导航栏和内容的 html、css。

header.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/link1" id="identified">Link 1</a></li>
        <li routerLinkActive="active"><a routerLink="/link2" id="identified">Link 2</a></li>
      </ul>
    </div>
  </div>
</nav>

header.css

.navbar-default {
  background-color: #7cd8fc;
}

.navbar-brand {
  color: white;
}
.navbar-brand:hover {
  color: white;
  background-color: #777799;
}
.navbar-brand:active {
  color: white;
}
#identified {
  color: black;
}
#identified:hover {
  background-color: #cadbda;
  /* background-color: #777799; */
}

* {
  font-family: Cambria; 
}

内容.html

<div class="container" style="width:100%;">
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
</div>

内容.css

(empty)

app.component.html

<app-header></app-header>
  <div class="container">
    <div class="row">
       <div class="col-md-12">
            <router-outlet></router-outlet>
        </div>
      </div>
  </div>

app.component.css

(empty)

违规显示：

标签： angularformatting

Answer 1

改变

<div class="container">

至

<div class="container-fluid">

引导容器类具有左右边距。使用流体容器创建一个没有边距的容器。

供参考https://getbootstrap.com/docs/4.0/layout/overview/#containers