Question

我正在使用Angular 5和bootstrap 4。这是我的代码：

app.component.html

 <app-home></app-home>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component ({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

home.component.html

 <header id="home-section">
  <div class="dark-overlay">
      <div class="home-inner">
          <div class="container">
              <div class="row">
                  <div class="col-lg-8 d-none d-lg-block">
                      <p>HELLO</p>

                  </div>
                  <div class="col-lg-4">
                      <div class="card bg-primary text-center card-form">
                          <div class="card-body">
                              <h3>Sign Up Today</h3>
                              <p>Please fill out this form to register</p>
                              <form>
                                  <div class="form-group">
                                      <input type="text" class="form-control form-control-lg" placeholder="Username">
                                  </div>
                                  <div class="form-group">
                                      <input type="email" class="form-control form-control-lg" placeholder="Email">
                                  </div>
                                  <div class="form-group">
                                      <input type="password" class="form-control form-control-lg" placeholder="Password">
                                  </div>
                                  <div class="form-group">
                                      <input type="password" class="form-control form-control-lg" placeholder="Confirm Password">
                                  </div>
                                  <input type="submit" class="btn btn-outline-light btn-block">
                              </form>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</header>

Angular正在添加一个样式如下：

*[_ngcontent-c1] {
    margin: 0%;
}

这种风格干扰了我的引导容器类，页面右侧有一个额外的空间。我会在这里附上快照：

在上图中，容器显然不在中间。

以下是我在chrome inspect中注释掉这种风格的截图。

我不确定为什么会这样，以及如何解决这个问题。我无法评论这种ngcontent风格，因为它是角度本身的一部分。

修改

我正在附加组件styles.scss文件：

#home-section{
  // background: url('https://c1.staticflickr.com/3/2932/14143338033_20c1ce9c44_b.jpg') no-repeat;
  background-size:cover;
  background-attachment:fixed;
  min-height:700px;

  .dark-overlay{
    background-color:rgba(0,0,0,0.7);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:700px;
  }

  .home-inner{
    padding-top:150px;
  }

  .card-form{
    opacity:0.8;
  }

  .fa{
    color:#008ed6;
    background:#fff;
    padding:4px;
    border-radius:5px;
    font-size:30px;
  }
}

Angular ngcontent搞乱了引导风格

0 个答案: