平板电脑的Bootstrap导航下拉链接解决方案？

Question

我有一个导航栏，当您将鼠标悬停在桌面上时会显示下拉菜单，而折叠显示移动设备和平板电脑，只有纵向。但是，对于平板电脑风景，菜单的功能与它在桌面上的功能类似，这使得下拉链接无法访问，因为当您点击链接时它只链接到父链接。我如何才能使平板电脑版本像移动设备一样，但看起来像桌面版？或者，如果点击所有设备显示下拉链接会更好吗？

<header id="masthead" class="site-header" role="banner">
        <div class="container-fluid">
            <div id="main-nav" class="row">
                <div class="header-wrap">
              <div class="site-branding">
                            <p class="site-title"><a href="#" rel="home">SITE NAME</a></p>
                    </div>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
            <ul id="primary-menu" class="menu">
      <li class="menu-item menu-item-has-children dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b></a>
      <ul class="dropdown-menu">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      </li>
      </ul>
      </nav>
      </div>
    </div>
  </div>
</header>


.nav-menu {
  display: none;
  position: relative;
  top: 70px;
  @media (min-width: 768px) and (max-width: 992px) {
    top: 0;
  }
}
.dropdown-menu {
  display: none;
  position: static;
  width: 100%;
  li {
    width: 100%;
  }
  min-width: 180px;
}
.dropdown-menu > .active a {
  background-color: #fff;
  color: #000 !important;
}

.main-navigation.toggled {
  .nav-menu {
    width: 100%;
    display: block;
    background-color: #363636;
    li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
    li > a {
      padding: 8px;
      pointer-events: none; // prevent it's immediate A child to follow HREF
      cursor: default;
    }
    a {color: #fff;}
    .dropdown-menu {
      position:static;
      top: 80px;
      display: none;
      background: none;
      box-shadow: none;
      padding: 0;
      a {
        color: #fff;
        pointer-events: auto;
        cursor: pointer;
      }
      li {
        background-color: #000;
        a {
          width: 100%;
          &:hover {
            color: #000;
          }
        }
      }
    }
  }
}


@media (min-width: 992px) {
  .main-navigation {
      .nav-menu {
        top: 0;
      }
        .dropdown-menu {
            visibility: hidden;
            display: block;
            opacity: 0;
            border-radius: 0;
            top: 3.15em;
            background-color: $site-dark-gray;
            // transform: translateY(-20px);
            transform: translateY(20px);
            transition: all .3s ease;
            left: -1.5em !important;
            overflow: hidden;
            padding: 0;
            border: 0;
        li:first-child {display: none !important;}
            li {
                margin: 0 !important;
                transition: all .3s ease;
                a {
                    padding-top: 8px;
                padding-bottom: 8px;
                }
                &:hover a {
                    color: #000 !important;
                    background-color: #fff;
                }
            }
            .active > a {
                    background-color: #fff;
                    color: #000 !important;
            }
        }

        .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
        }
        .dropdown:after {
            content: "";
            display: block;
            height: 2em;
        position: absolute;
        top: 1em;
        width: 100%;
    }
  }
}

Answer 1

正如here所述，您必须实施一个新的媒体查询，其限制在768和xy像素之间 - xy将是您的新断点，如平板电脑的宽度（1024？）。请参阅投票答案的评论，因为答案中提供的解决方案不起作用 - 相反，this link提供的ZimSystem可根据您的需求提供相应的调整值！ / p>

但是，执行此操作不会将此查询限制为移动设备，因此将桌面设备上的浏览器窗口大小调整为1024px以下也会导致导航栏崩溃。我还没有听说过将媒体查询限制在移动设备上的任何可能性，所以虽然这对你来说可能不是最好的解决方案，但它应该是一个临时的解决方案。