Angular 4组件没有水平填充

enter image description here 所以我想让图像和导航栏文本水平填充整个屏幕，但是找不到一种方法。我已经使用CSS属性边框填充和宽度来尝试和扩大背景的navbar元素，但似乎没有改变它;元素始终以边界为中心。Angular 4组件没有水平填充

这只发生在我将代码从HTML/CSS转换到Angular之后;这是我的代码看起来如何当我不把它在组件：

有谁知道如何解决这个问题？在此先感谢

Components

content_component.html <!-- Intro Header --> 
<div class="all"> 
<header class="masthead"> 
    <div class="intro-body"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-8 mx-auto"> 
      <a href="#about" class="btn btn-circle js-scroll-trigger"> 
      <i class="fa fa-angle-double-down animated"></i> 
      </a> 
     </div> 
     </div> 
    </div> 
    </div> 
</header> 

    <!-- About Section --> 
    <section id="about" class="content-section text-center"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-8 mx-auto"> 
      <h2>About Me</h2> 
      <p> 
      hello 
      </p> 
     </div> 
     </div> 
    </div> 
    </section> 
</div> 

content_component.css 
    .all{ 
     height:100%; 
     background: black; 
     color: white; 
     margin: 0; 

    } 

    .masthead{ 
     display: table; 

     overflow:auto; 
     padding-left: 0px; 
     padding-right: 0px; 
     padding-top: 100px; 
     padding-bottom: 600px; 

     text-align: center; 

     color: white; 
     background: url('../../img/intro-bg.jpg') no-repeat bottom center scroll; 
     background-size: 100%; 
     background-color: black; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     .intro-body { 
     display: table-cell; 

     vertical-align: middle; 
     .brand-heading { 
      font-size: 50px; 
     } 
     .intro-text { 
      font-size: 18px; 
     } 
     } 
     @media(min-width:768px) { 
     height: 100%; 
     padding: 0; 
     .intro-body { 
      .brand-heading { 
      font-size: 100px; 
      } 
      .intro-text { 
      font-size: 22px; 
      } 
     } 
     } 
    } 

app_component.css 
    .container{ 
    } 
    html{ 
     margin:auto; 
     overflow: hidden; 
    }

来源

2017-10-10 Jeremy Lee

请附上您的代码，否则就根本不可能说有什么不妥的地方。 –

添加了代码。谢谢 –

可以定身保证金自动 https://jsfiddle.net/wxmsud1d/

body { 
    margin:auto; 
} 
header { 
    background-color:red; 
} 

<header>Text goes here</header>

来源

2017-10-10 05:55:34 hurtbox

试过了，似乎没有工作。我应该在应用程序组件style.css还是子组件样式中使用它？ –

Angular 4组件没有水平填充

回答

相关问题