我创建了 this简单的致敬页面，具有固定的背景图像。
我想用文本内容偏移容器(我专门为它创建了一个类:.main-content)，用 margin-top: 130px 稍微向下偏移，所以它没有粘在页面的最顶部。
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
然而——奇怪的事情发生了——
.main-content {
margin-top: 130px;
}
margin 似乎影响 body(根据 Chrome DevTools...)从而最终影响(应用 margin-top 到)带有 .darken 的 div > 上课!
我想实现两件事:
- 让我的文字偏离页面顶部
- 将
.darken类应用于整个视口(viewport)
我怎样才能做到这一点？
最佳答案
请试试这个:
使用填充代替边距。
.main-content {
padding-top: 130px;
}
关于html - 为什么子容器会影响父容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36519951/