Question

我的投资组合页面有一个粘性导航栏，但是当我点击导航栏链接时，它会与每个部分中的文本重叠。在约，它重叠文本。在＆＃34;投资组合＆＃34;和＆＃34;关于＆＃34;它重叠两个瓷砖。我尝试用每个部分的一些填充顶部进行补偿无济于事。

以下是完整的导航栏：

<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代码

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

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

谢谢你们

Answer 1

我看到的第一件事是你使用ID来设置元素样式，不，使用类。您在多个元素中使用ID“portfolio”，而Id在文档中应该是唯一的。无论如何要解决您的问题，只需添加margin-top: 100px;就足够了

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

并在html中添加一个类

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

以及其他所需的IDS。希望能帮助到你！我正在这个网站上工作，完成了你想要实现的目标，check it out

Answer 2

查看此HTML源代码并检查是否有帮助。别忘了在CSS和Javascript设置部分复制所有链接。

https://codepen.io/danogliari/pen/gWQWqo

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">Daniel Ogliari</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#about">About</a></li>
          <li><a href="#profile">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

Answer 3

我对Bootstrap 4中相同问题的解决方案是...

.navbar-nav > .nav-item > a {
position: relative; 
}

Navbar重叠内容在Bootstrap 4中

3 个答案: