Question

有人能解释一下这里发生了什么吗？

我正在使用bootstrap 3.3.7。

为什么.container元素不可见？

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Big Brother</a>
        </div>
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" href="/">Home</a></li>
                <li><a href="#" href="/message">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>something</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <h2>Invisible</h2>
    </div>

Answer 1

您的<h2>不可见，它隐藏在导航栏后面。

您正在使用使用固定定位的导航栏。这使它脱离了正常的文档流程，它不占用空间，因此元素开始流动就好像它不在那里一样。

如果您将padding-top: 50px;添加到<body>，您会看到<h2>。

如果您通读Bootstrap Navbar Docs，则会注意到标注为需要身体填充的标注。

Bootstrap固定导航行为

1 个答案: