角度9，占据组件的整个宽度

Question

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

但是我想要这样的东西： 我尝试将主div放在width。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; 
}

Content.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>

Content.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)

违规显示：

Answer 1

更改

<div class="container">

到

<div class="container-fluid">

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

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