我无法使用引导程序的导航栏从锚标记导航到 div 元素答案

【问题标题】：I am not able to navigate to div element from anchor tag with navigation bar of bootstrap我无法使用引导程序的导航栏从锚标记导航到 div 元素
【发布时间】：2019-07-18 02:39:23
【问题描述】：

我正在尝试从 href 导航到 div 元素。它工作正常，但是当我在引导程序的导航栏中添加 href 时，它不起作用。

如果我删除导航栏，那么它工作正常。

 <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"> <a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse"><i></i></a>
      <div class="navbar-brand text-center"> <a href="index.html"><img width="114" height="64" src="style/images/logo.png" alt="" data-src="style/images/logo1.png" data-ret="style/images/logo@2x.png" class="retina" /></a> </div>
      <!-- /.navbar-brand --> 
    </div>
    <!-- /.navbar-header -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="elements.html">Elements</a></li>
        <li><a href="#elsewhere" class="fancybox-inline" data-fancybox-width="325" data-fancybox-height="220"><i class="icon-heart-1"></i><span>Elsewhere</span></a></li>
      </ul>
      <!-- /.navbar-nav --> 
    </div>
    </nav>

当我添加导航栏时它不起作用。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

这可能是别的东西。看这里：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"> <a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse"><i></i></a>
      <div class="navbar-brand text-center"> <a href="index.html"><img width="114" height="64" src="style/images/logo.png" alt="" data-src="style/images/logo1.png" data-ret="style/images/logo@2x.png" class="retina" /></a> </div>
      <!-- /.navbar-brand --> 
    </div>
    <!-- /.navbar-header -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="elements.html">Elements</a></li>
        <li><a href="#elsewhere" class="fancybox-inline" data-fancybox-width="325" data-fancybox-height="220"><i class="icon-heart-1"></i><span>Elsewhere</span></a></li>
      </ul>
      <!-- /.navbar-nav --> 
    </div>
    </nav>

<div id="portfolio" style="margin-top: 100vh; background: blue; color: white; height: 100vh;">PORTFOLIO</div>
<div id="about" style="margin-top: 100vh; background: black; color: white; height: 100vh;">ABOUT</div>
<div id="contact" style="margin-top: 100vh; background: green; color: white; height: 100vh;">CONTACT</div>
<div id="elsewhere" style="margin-top: 100vh; background: red; color: white; height: 100vh;">ESLEWHERE</div>

【讨论】：