Question

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

<!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，这会导致布局问题。

谢谢。

Answer 1

使用“ container-fluid”代替“ container”类。同样，对于行CSS类，则使用行流体。注意：.container对于引导程序中的每个屏幕尺寸（xs，sm，md，lg）具有一个固定的宽度； .container-fluid扩展以填充可用宽度

Answer 2

在您的app.component.scss中，使用以下命令：

:host {
  width: 100%;
}

角度-<div _ngcontent-c0 =“”>不继承父div宽度

2 个答案: