<body>
<div class="sts-viewport-fill">
<nav role="navigation" class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Knonet</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
<li><a href=#>Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<h1 class="text-center">CONNECT WITH EVERYONE.<br>
<small>Knonet aims to connect the whole world with the Internet.</small>
</h1>
</div>
</div>
<div class="container sts-second-slide">
Salut, et Bonjour!
</div>
</body>
那是我的 HTML。我已经像这样应用了一堆 CSS 规则:
body {
font-family: 'Source Sans Pro', 'Segoe UI Light', sans-serif;
font-weight: initial;
font-weight: 100;
}
.sts-viewport-fill {
position: absolute;
top:0;right:0;bottom:0;left:0;
background-color: #000000;
color: #ffffff;
}
.sts-viewport-fill .container-fluid h1 {
margin: 250px auto 100px auto;
font-weight: 900;
}
.navbar-collapse, nav [type="button"] {
border: none !important;
border-radius: 0%;
}
.sts-second-slide {
margin-top: 100px;
}
就我而言，这使得 div.sts-viewport-fill 适合屏幕的整个视口(viewport)，或者至少适合屏幕的剩余部分。
问题是什么？看到那里所有的法国人了吗？ 你好，你好!？ 它不会出现在浏览器中。观察:
有人能告诉我这里发生了什么事吗？我有一种强烈的感觉，这与 position: absolute; 和 top:0;bottom:0; 规则有关。
Merci d'Avance!
PS:即使我将 color: #fff; 属性应用到 .sts-second-slide 选择器，我仍然没有得到结果。
最佳答案
您必须向该元素添加 position。
尝试
.sts-second-slide {
margin-top: 100px;
position: relative;
}
关于html - 文字不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39549101/