如何让我的文字出现在导航栏下方？

问题描述 投票：0回答：2

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

这是代码。

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/[email protected]/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>

python html css django
2个回答
2
投票

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

基本上，当您将导航设置为 

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/[email protected]/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>

0
投票

文本位于导航栏后面，因为您使用“固定顶部”类为其指定了固定位置。如果您不想有固定的导航栏，我认为您可以删除该类名。

如果你想有一个固定的导航栏，你可以使用 css 向下移动你的容器，使用“margin-top”作为你的导航栏的高度，你的内容将在导航栏的正下方可见。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.