ブートストラップ固定のNavbarがHTMLセクションを回避する

Question

これは私が期待していなかったものです。私はページの上部にBootstrap Navbarを持っていますが、navbar-fixed要素をNavbarに配置すると、すぐ下にある<section> HTMLタグがオーバーレイされます。私は下に私のコードを投稿しますが、私が取得しようとしているのは、自分のサイトに固定されたナビゲーションバーを持っていて、最初のセクション上にホバリングしていないことです。

ナビゲーションバー

<nav class="navbar navbar-default navbar-fixed" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">RTD62</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#about" class="smoothScroll">About Me</a></li> 
       <li><a href="#articles" class="smoothScroll">Articles</a></li> 
       <li><a href="#talks" class="smoothScroll">Talks</a></li> 
       <li><a href="#experience" class="smoothScroll">Experience</a></li> 
       <li><a href="#contact" class="smoothScroll">Get In Touch</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-behance"></i> Behance</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

まずHTMLのセクション

<section class="about" id="about"> 
    <div class="container"> 
     <div class="hidden-xs" align="center"> 
      <amp-img src="img/Me.jpg" height="250" width="250" style="border-radius: 200px"></amp-img> 
      <h3>Robert Dewitt</h3> 
      <p>Front End Web Developer</p> 
     </div> 
    </div> 
    <br /> 
</section> 

Answer 1

簡単な解決策は、ナビゲーションバーの周りのdivを作ります。好きなものを呼んでください。ヘッダーがあれば、navは内部にあるはずです。

は、それがheaderbox

.headerbox { 位置と呼ばれているだけと言うことができます：固定。 トップ：100％ }

参考になった？

+ rep me thanks