Bootsrap 3 下拉子菜单链接在移动视图中不起作用 [英] Bootsrap 3 drop - down submenu links not working in mobile view

查看：28
本文介绍了Bootsrap 3 下拉子菜单链接在移动视图中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在引导程序 3 中创建了一个下拉子菜单，链接在其中起作用(它转到相应的页面).但是，当我将浏览器缩小为看起来像移动视图时，子菜单的链接不起作用(单击菜单时它会转到不同的页面).

下图描述了我的问题.

从上图中，如果我移动光标以单击泰米尔通讯"，它会移动到图库"页面.

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

以下是我的代码:-

<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

<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(); ?>">关于我们</a><li><a href="<?php echo site_url('welcome/support_us'); ?>">支持我们</a><li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">时事通讯</a><ul class="nav navbar-nav pull-right dropdown-menu" role="menu"><li><a href="<?php echo site_url('welcome/tam_newsletter'); ?>">泰米尔语时事通讯</a></li><li><a href="<?php echo site_url('welcome/eng_newsletter'); ?>">英文简报</a></li><li><a href="<?php echo site_url('welcome/gallery'); ?>"><span>画廊</span></a><li><a href="<?php echo site_url('welcome/contact_us'); ?>"><span>联系我们</span></a>

</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="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

<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(); ?>">关于我们</a><li><a href="<?php echo site_url('welcome/support_us'); ?>">支持我们</a><li class="active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">时事通讯</a><ul class="nav navbar-nav pull-right dropdown-menu" role="menu"><li><a href="<?php echo site_url('welcome/tam_newsletter'); ?>">泰米尔语时事通讯</a></li><li><a href="<?php echo site_url('welcome/eng_newsletter'); ?>">英文简报</a></li><li><a href="<?php echo site_url('welcome/gallery'); ?>"><span>画廊</span></a><li><a href="<?php echo site_url('welcome/contact_us'); ?>"><span>联系我们</span></a>

</nav>

解决方案

您已经在使用引导程序导航了...您添加到下拉菜单中的下拉菜单正在造成问题....

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

@media(最大宽度:768px){#navbar-spy >.navbar-导航{左边框:1px 实心 #ddd;边距:0 -15px；宽度:170px；}#navbar-spy .dropdown-menu.pull-right {浮动:无！重要；}#navbar-spy .dropdown-menu.navbar-nav{保证金:0;字体大小:13px；填充:0；}#navbar-spy .navbar-nav .open .dropdown-menu.navbar-nav >立>一种{填充:2px 10px 2px 20px;边框底部:1px 实心 #ddd;}}

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>

解决方案

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

这篇关于Bootsrap 3 下拉子菜单链接在移动视图中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆