Question

<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适合屏幕的整个视口，或者至少是它的左边。

问题？看那里的所有法语？ Salut，et Bonjour！？它不会出现在浏览器中。观察：

有人可以告诉我这里有什么吗？我非常强烈地认为这与position: absolute;和top:0;bottom:0;规则有关。

Merci d＆＃39; Avance！

PS：即使我将color: #fff;属性应用于.sts-second-slide选择器，我仍然无法获得结果。

Answer 1

您必须将position添加到该元素。

尝试

.sts-second-slide {
  margin-top: 100px;
  position: relative;
}

文字没有显示

1 个答案: