Angular 4组件没有水平填充
问题描述:
enter image description here 所以我想让图像和导航栏文本水平填充整个屏幕,但是找不到一种方法。我已经使用CSS属性边框填充和宽度来尝试和扩大背景的navbar元素,但似乎没有改变它;元素始终以边界为中心。Angular 4组件没有水平填充
这只发生在我将代码从HTML/CSS转换到Angular之后;这是我的代码看起来如何当我不把它在组件:
有谁知道如何解决这个问题?在此先感谢
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;
}
答
可以定身保证金自动 https://jsfiddle.net/wxmsud1d/
body {
margin:auto;
}
header {
background-color:red;
}
<header>Text goes here</header>
+0
试过了,似乎没有工作。我应该在应用程序组件style.css还是子组件样式中使用它? –
请附上您的代码,否则就根本不可能说有什么不妥的地方。 –
添加了代码。谢谢 –