Bootsrap 3 drop - down submenu links not working in mobile view

问题

I created a drop down sub menu in bootstrap 3, in which the links are working (It goes to respective pages). But, While i shrink the browser to look as if like a mobile view, the links of the sub menus are not working(It goes to different page while the menu is clicked).

The following image depicts the issue with my issue.

From the above image, if i move the curser to click the 'tamil newsletter', it is moving to 'gallery' page.

I feel there is a simple solution for this issue and i do not know where i am wrong.

The following is my code:-

<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-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>

            <div id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav pull-right">
                    <li>
                        <a href="<?php echo site_url(); ?>">About Us</a>
                    </li>
                    <li>
                        <a href="<?php echo site_url('welcome/support_us'); ?>">Support Us</a>
                    </li>
                    <li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Newsletter</a>
                       <ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
                          <li><a href="<?php echo site_url('welcome/tam_newsletter'); ?>">Tamil Newsletter</a></li>
                          <li><a href="<?php echo site_url('welcome/eng_newsletter'); ?>">English Newsletter</a></li>
                       </ul>
                    </li>
                    <li>
                        <a href="<?php echo site_url('welcome/gallery'); ?>"><span>Gallery</span></a>
                    </li>
                    <li>
                        <a href="<?php echo site_url('welcome/contact_us'); ?>"><span>Contact Us</span></a>
                    </li>
                </ul>         
            </div>
        </div>
    </nav>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-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>

    <div id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav pull-right">
        <li>
          <a href="<?php echo site_url(); ?>">About Us</a>
        </li>
        <li>
          <a href="<?php echo site_url('welcome/support_us'); ?>">Support Us</a>
        </li>
        <li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Newsletter</a>
          <ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
            <li><a href="<?php echo site_url('welcome/tam_newsletter'); ?>">Tamil Newsletter</a></li>
            <li><a href="<?php echo site_url('welcome/eng_newsletter'); ?>">English Newsletter</a></li>
          </ul>
        </li>
        <li>
          <a href="<?php echo site_url('welcome/gallery'); ?>"><span>Gallery</span></a>
        </li>
        <li>
          <a href="<?php echo site_url('welcome/contact_us'); ?>"><span>Contact Us</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

回答1:

You are using bootstrap nav already... The pull-right which you added to dropdown-menu is creating the problem....

So as a quick patch, add this to you css.. add more specificity if there are other dropdown-menus on the page.

@media(max-width: 768px){
  #navbar-spy > .navbar-nav{
    border-left: 1px solid #ddd;
    margin: 0 -15px;
    width: 170px;
  }
  #navbar-spy .dropdown-menu.pull-right {
    float: none !important;
  }
  #navbar-spy .dropdown-menu.navbar-nav{
    margin:0;
    font-size: 13px;
    padding: 0;
  }
  #navbar-spy .navbar-nav .open .dropdown-menu.navbar-nav > li > a{
    padding:2px 10px 2px 20px;
    border-bottom: 1px solid #ddd;
  }
}

来源：https://stackoverflow.com/questions/44622664/bootsrap-3-drop-down-submenu-links-not-working-in-mobile-view