Question

如果我看下面的bootstrap示例： http://getbootstrap.com/examples/navbar/

然后在jumbotron和导航栏之间有一些空间。

我深入研究了这个例子的css，如果我禁用它（2次）：

.navbar {
    margin-bottom: 20px;
}

然后两者之间的空间消失了。当我自己尝试这样做时，margin-bottom没有效果。这是为什么？我该如何解决？（我做了一次搜索，但我发现有人想要消除我没有的差距......）。

<div class="container">

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">FOOBAR</a>
            </div>

        </div> <!-- /.container-fluid -->

    </div>

    <div class="jumbotron">
        <h1>Test</h1>
    </div>

</div>

http://jsfiddle.net/6Qp9v/

Answer 1

看起来你需要在.jumbotron的顶部添加你想要的边距，因为.navbar是固定位置到页面顶部 - 因此它与.jumbotron的流程没有任何关系。

Answer 2

只需为身体添加一些填充顶部即可。

body{
        padding-top: 70px;
    }

希望这个答案解决了您的问题。

Answer 3

.jumbotron {
    margin-top: 70px;
}

这应该有效！（要获得所需的20px间隙，您需要在此处放置70px，因为导航栏距离顶部几乎50px。由于导航栏是固定的，margin-top不能与navbar相对，而是相对于顶部页面的内容。

您也可以尝试以下代码：

body {
    padding-top: 70px;
}

也可以！

在bootstrap navbar和jumbotron之间创建空间

3 个答案: