Bootstrap 3 下拉子菜单链接在移动视图中不起作用

Question

我在 bootstrap 3 中创建了一个下拉子菜单，其中的链接有效（它转到相应的页面）。但是，虽然我将浏览器缩小为看起来像移动视图，但子菜单的链接不起作用（单击菜单时它会转到不同的页面）。

下图描述了我的问题。

从上图中，如果我将光标移动到单击 'tamil newsletter'，它将移动到 'gallery' 页面。

我觉得这个问题有一个简单的解决方案，我不知道我错在哪里。

以下是我的代码：-

<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>

Answer 1

您已经在使用 bootstrap 导航...您添加到下拉菜单的向右拉会产生问题....

因此，作为一个快速补丁，将此添加给您 css.. 如果页面上还有其他下拉菜单，请添加更多特异性。

@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;
  }
}

Bootstrap 3 下拉子菜单链接在移动视图中不起作用

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

html

submenu

twitter-bootstrap