如何讓我的文字出現在導航欄下方？
[英]How can I make my text appear below the navbar?
問題描述
我目前正在編寫我的第一個網站，但遇到了一個我不知道如何解決的問題。 我有一個帶有導航欄的主頁，當我在頁面中放置文本時，它似乎被剪切了，因為文本從導航欄后面開始。 如何使文本顯示在導航欄下方？
這是代碼。
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
這可能是重復的問題。 但我還是回答了。
基本上當你將 nav 設置為position: fixed; 您必須向主容器或主體添加 padding-top 或 margin-top，以從導航欄的最底部開始。
所以基本上我在 body 上添加了 padding-top（推薦練習）：
body{
padding-top: 56px;
}
或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
文本位於導航欄后面，因為您使用“固定頂部”類為其指定了固定位置。 如果您不想擁有固定的導航欄，我認為您可以刪除該類名。
如果你想要一個固定的導航欄，你可以用 css 向下移動你的容器，使用“margin-top”作為導航欄的高度，你的內容將在導航欄下方可見。
我怎樣才能讓我的主程序首先出現，我怎樣才能在我的主程序中調用我的函數？
[英]How can I make my main program appear first and how can I call my functions in my main program?
如何在Python的reportlab程序包中使項目符號直接出現在縮進列表的文本旁邊？
[英]How can I make the bullet appear directly next to the text of an indented list in the reportlab package for python?
TkInter：如何使對象出現在第二個而不是第一個窗口上？
[英]TkInter: how can I make objects appear on my second window rather than the first?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.