如何停止在移动视图上打开导航栏的导航标签？

Question

我有以下代码。当我点击导航标签时，触发导航栏下拉菜单并显示我的菜单。它在点击时打开并在下一次点击时关闭。我正在使用bootstrap 3.3.6。我怎么解决这个问题？

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <a href="#page-top" title="Welcome" target="_self" class="navbar-brand page-scroll">Brand</a> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#about" title="About US" target="_self" class="page-scroll">About</a> 
       </li> 
       <li> 
        <a href="#services" title="Our Services &amp; Skills" target="_self" class="page-scroll">Services</a> 
       </li> 
       <li> 
        <a href="#portfolio" title="Our Portfolio &amp; Testimonials" target="_self" class="page-scroll">Portfolio</a> 
       </li> 
       <li> 
        <a href="#team" title="Our Team" target="_self" class="page-scroll">Team</a> 
       </li> 
       <li> 
        <a href="#contact" title="Contact US" target="_self" class="page-scroll">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

导航选项卡

   <!-- Nav tabs --> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="active"> 
         <a href="#tab1" title="Client's Testimonial" target="_self" aria-controls="tab1" role="tab" data-toggle="tab"></a> 
        </li> 
        <li role="presentation"> 
         <a href="#tab2" title="Client's Testimonial" target="_self" aria-controls="tab2" role="tab" data-toggle="tab"></a> 
        </li> 
        <li role="presentation"> 
         <a href="#tab3" title="Client's Testimonial" target="_self" aria-controls="tab3" role="tab" data-toggle="tab"></a> 
        </li> 
        <li role="presentation"> 
         <a href="#tab4" title="Client's Testimonial" target="_self" aria-controls="tab4" role="tab" data-toggle="tab"></a> 
        </li> 
       </ul> 

Answer 1

@media only screen and (max-width:768px) { 
    .nav.nav-tabs{ 
     display: none; 
    } 
}