如何让我的文字出现在导航栏下方？
[英]How can I make my text appear below the navbar?
问题描述
I'm currently coding my first website and I'm experiencing a problem I don't know how to solve.
我目前正在编写我的第一个网站，但遇到了一个我不知道如何解决的问题。 I have a home page with a navbar, and when I put text in the page, it appears cut because the text starts behind the navbar.我有一个带有导航栏的主页，当我在页面中放置文本时，它似乎被剪切了，因为文本从导航栏后面开始。 How can I make the text appear below the navbar?如何使文本显示在导航栏下方？
Here's the code.这是代码。
body { background-attachment: fixed; background-color: rosybrown; }
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset= "UTF-8"> <title>DNA TRANSLATOR</title> <meta charset= "UTF-8"/> <meta name= "viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= '{% static "css/style.css" %}'> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style='background-color: snow;'> <div class = 'container'> <a class="navbar-brand" href="#">DNA Translator</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="">Translator</a> </li> <li class="nav-item"> <a class="nav-link" href="#" >Process</a> </li> </ul> </div> </div> </nav> <div class = "container"> {% block content%} {% endblock content%} </div> </body> </html>
2 个解决方案
解决方案1
1 2020-09-24 14:49:10
It is probably duplicate question.这可能是重复的问题。 But I answer it anyway.但我还是回答了。
Basicly when you set nav as position: fixed;基本上当你将 nav 设置为position: fixed; You must add a padding-top or margin-top to your main container or body to start from the very bottom of the navbar.您必须向主容器或主体添加 padding-top 或 margin-top，以从导航栏的最底部开始。
So basicly I added padding-top to body (recommanded practice):所以基本上我在 body 上添加了 padding-top（推荐练习）：
body{
padding-top: 56px;
}
OR margin-top or padding-top to .main.container或margin-top或padding-top到.main.container
.main.container{
margin-top: 56px;
}
body { background-attachment: fixed; background-color: rosybrown; padding-top: 56px; }
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset= "UTF-8"> <title>DNA TRANSLATOR</title> <meta charset= "UTF-8"/> <meta name= "viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= '{% static "css/style.css" %}'> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style='background-color: snow;'> <div class = 'container'> <a class="navbar-brand" href="#">DNA Translator</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="">Translator</a> </li> <li class="nav-item"> <a class="nav-link" href="#" >Process</a> </li> </ul> </div> </div> </nav> <div class = "main container"> {% block content%} {% endblock content%} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus id nulla eu imperdiet. Fusce imperdiet tellus eu sem hendrerit, eu consequat leo rhoncus. Nullam vehicula nunc id leo consequat, et bibendum magna fringilla. Proin rhoncus aliquam odio, sed euismod lectus efficitur ut. Nam faucibus nisi ullamcorper, luctus quam id, rutrum nisi. Sed ac interdum ante, ultrices aliquam eros. Nulla arcu urna, lacinia eu accumsan sed, consectetur et dui. Vivamus mi nisl, dapibus vel justo vitae, dignissim ornare nisl. Maecenas condimentum ex id erat consequat porttitor. Duis auctor sed nisl at blandit. Phasellus maximus purus vel efficitur consequat. Donec tempus justo in metus pellentesque dignissim. Nulla facilisi. Aenean vulputate dictum turpis id mattis. Integer turpis metus, fermentum eget blandit elementum, ultrices hendrerit arcu. </div> </body> </html>
解决方案2
0 2020-09-24 14:37:48
The text is behind the navbar because you gave it a fixed position with the "fixed-top" class.文本位于导航栏后面，因为您使用“固定顶部”类为其指定了固定位置。 If you dont want to have a fixed navbar, i think you can just remove that classname.如果您不想拥有固定的导航栏，我认为您可以删除该类名。
If you want to have a fixed navbar, you can move your container down with css, use "margin-top" for that with the height of your navbar and your content will be visible right under the navbar.如果你想要一个固定的导航栏，你可以用 css 向下移动你的容器，使用“margin-top”作为导航栏的高度，你的内容将在导航栏下方可见。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.