时间戳

首页 > 解决方案 > 如何使我的文本显示在导航栏下方？

python - 如何使我的文本显示在导航栏下方？

问题描述

我目前正在编写我的第一个网站，但遇到了一个我不知道如何解决的问题。我有一个带有导航栏的主页，当我在页面中放置文本时，它会出现剪切，因为文本从导航栏后面开始。如何使文本显示在导航栏下方？

这是代码。

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>

标签： pythonhtmlcssdjango

解决方案

这可能是重复的问题。但我还是回答了。

基本上，当您将 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>

推荐阅读