导航栏在Bootstrap 4中重叠的内容 [英] Navbar overlapping content in Bootstrap 4

问题描述

我的投资组合页面上有一个粘性导航栏，但是当我单击导航栏链接时，它会与每个部分的文本重叠.在大约中，它与文本重叠.在作品集"和关于"中，它与两个图块重叠.我试图弥补每个部分的空白，但无济于事.

My portfolio page has a sticky navbar, but when I click on the navbar links it overlaps the text in each section. In about, it overlaps the text. In "portfolio" and "about" it overlaps both tiles. I tried to compensate with some padding-top in each section to no avail.

这是完整的导航栏:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <a class="navbar-brand mr-auto navfont" href="#">portfolio.</a>

            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
                </li>

              <li class="nav-item">
                    <a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
              </li>

              <li class="nav-item">
                    <a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
              </li>

           </ul>
    </nav>

这是其中一部分的CSS代码

And here's the CSS code for one of the sections

 #contact {
  background-color: #466365;
  width: 100%;
  height: 100%;
  padding-top:50px;
  color: white;
}

https://codepen.io/pablovester/pen/ZKJxLL

谢谢你们

推荐答案

我看到的第一件事是您使用ID对元素进行样式设置，否，请使用class.您在1个以上的元素中使用ID投资组合"，而ID在文档中应该是唯一的.无论如何要解决您的问题，只需添加 margin-top:100px; 就足够了

First thing wrong I see is you are using ID's to style elements, NO, use class. You are using ID "portfolio" in more than 1 element while Id should be unique in document. Anyway to fix your problem just add margin-top: 100px; will be enough

.portfolio {
  background-color: #bcd39c;
  width: 100%;
  height: 100%;
  padding-top:50px;
  margin-top:100px;
}

并在html中添加一个类

and add a class in html

<div id="portfolio" class="portfolio"> 

以及其他所需的IDS.希望能帮助到你！我正在该网站上工作，并且确实做了您要实现的目标，查看

and also in other needed IDS. Hope it helps! I'm working on this site and did exactly what you are trying to achieve, check it out

这篇关于导航栏在Bootstrap 4中重叠的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！