Angular - <div _ngcontent-c0> 没有继承父 div 宽度答案

【问题标题】：Angular - <div _ngcontent-c0> is not inheriting the parent div widthAngular - <div _ngcontent-c0> 没有继承父 div 宽度
【发布时间】：2018-07-07 04:23:02
【问题描述】：

我正在使用Angular 5 构建ASP.Net MVC 应用程序，这是模板的样子。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Home Page - My ASP.NET Application</title>
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 <base href="/" />

 </head>
 <body>
  <div class="container body-content">

  <div class="col-md-12">
    <app-root>test</app-root>
  </div>
  </div>
  <hr />
  <footer>
    <p>&copy; 2018 - Foodie</p>
 </footer>
 <link href="/Assets/bundles/styles.59e253c87b78feb8a0f7.bundle.css" rel="stylesheet"/>

<script src="/Assets/bundles/inline.318b50c57b4eba3d437b.bundle.js"></script>
<script src="/Assets/bundles/polyfills.515ed9df1f4876ab6cb6.bundle.js"></script>

</body>
</html>

这就是屏幕的渲染方式。

我不知道 Angular 生成的动态占位符 <div _ngcontent-c0> 占用 412px

如果您看到我在父 div 上有 col-md-12 并且这会导致布局问题。

谢谢。

【问题讨论】：

标签： html css angular bootstrap-4 angular5

【解决方案1】：

在您的app.component.scss 中使用以下内容：

:host {
  width: 100%;
}

【讨论】：

是的。这满足了我的要求.. 非常感谢 sssssssssssss :)
你能帮我解释一下为什么我需要这样做吗？我不应该在我创建的每个元素上继续这样做。我有点困惑为什么这很奇怪

【解决方案2】：

使用“container-fluid”代替“container”类。同样对于行 css 类，然后使用行流体。注意： .container 在 bootstrap (xs,sm,md,lg) 中对每个屏幕尺寸都有一个固定宽度； .container-fluid 扩展以填充可用宽度

【讨论】：