Question

我使用bootstrap创建了一个“简单”的导航栏。现在导航栏覆盖了文本。我试图给.navbar一个50px的边距底部，没有结果。这是Page，代码在这里：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Seite</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <link href="css/meine.css" rel="stylesheet">
      
    </head>
    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#">Startpage4you</a>
            </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Anmelden</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="row">
            <div class="col-md-2">.col-md-4</div>
            <div class="col-md-8">.ccol-md-8</div>
            <div class="col-md-2">.col-md-4</div>
        </div>
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

我的样式表

.navbar{
    margin-bottom: 50px;
}

Answer 1

由于您的导航栏具有固定属性，因此其他所有内容都会显示在其下方，并向上推到页面顶部。

所以你只需要将margin-top:51px添加到你的div'行'，以便能够看到它。

我会做的是将div类行放在容器中，然后将margin-top应用到容器中。然后你可以将它用于后续页面。

Answer 2

由于您使用的是固定导航栏，因此您需要向自己的身体添加填充，就像引导程序文档所说：

body {
    padding-top: 70px;
}

http://getbootstrap.com/components/#navbar-fixed-top

Bootstrap导航栏覆盖文本

2 个答案: