Navbar在Bootstrap中重叠内容4

我的投资组合页面有一个粘滞的导航栏，但是当我点击导航栏链接时，它会重叠每个部分中的文本。大约，它与文本重叠。在“投资组合”和“约”它重叠两个瓷砖。我试图在每个部分补偿一些填充顶部无济于事。Navbar在Bootstrap中重叠内容4

下面是完整的导航栏：

<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

谢谢你们

来源

2017-05-20 vester

的第一件事情错了，我看到的是你正在使用的ID，以风格元素，NO，使用类。您在多个元素中使用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">

以及在其它所需的ID。希望它有帮助！我正在这个网站上工作，做了你正在努力实现的，check it out

来源

2017-05-20 19:57:54

¡Hola Adolfo！ ¡格拉西亚斯！（Escribiréel resto eningléspara que todos entiendan）填充顶部解决了这个问题，但最重要的是，我将为您的将来选择您的ID和课程评论，编写漂亮而干净的代码。谢谢！ – vester

Me alegra haberte podido ayudar aunque miingléssea flojito。 –

看看这个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>

来源

2017-05-20 19:48:00 ogliari

Navbar在Bootstrap中重叠内容4

回答

相关问题