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

回答

相關問題