Css 如何在iPad上将引导导航设置为断开移动？

我如何设置断点，使导航在iPad纵向（768px）上切换到mobile，并在纵向iPad上显示与在移动设备上相同的子导航？它当前显示的子导航与桌面上显示的边框和背景相同

HTML:

    <nav class="navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#"><img src="../images/logo.png"></a>

      <button type="button" class="btn btn-default profile-btn">Profile</button>

    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ABOUT US <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </li>

        <li class="dropdown mega-dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">WHAT WE DO<span class="caret"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu">
            <li class="col-md-4 col-xs-12 image-column">
              <ul>

                <div class="carousel-inner">
                  <div class="item active hidden-md-down">
                    <a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
                    <h4 class="picture-sub">LINK</h4>
                  </div>
                  <div class="item active">
                    <a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
                    <h4 class="picture-sub">LINK</h4>
                  </div>
                  <div class="item active">
                    <a href="#"><img src="http://placehold.it/156x120" class="img-responsive" alt=""></a>
                    <h4 class="picture-sub">LINK</h4>
                  </div>
                </div>
              </ul>
            </li>
            <li class="col-md-4 col-xs-12">
              <ul>
                <li class="dropdown-header">LINK</li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li class="dropdown-header spacer">LINK</li>
                <li><a href="#">Link & Link</a></li>
                <li><a href="#">Link & Link</a></li>
                <li><a href="#">Longer link title</a></li>
                <li><a href="#">Longer link title</a></li>
                <li class="dropdown-header spacer">LINK</li>
                <li><a href="#">Long link title</a></li>
                <li><a href="#">Long link title</a></li>
              </ul>
            </li>
            <li class="col-md-4 col-xs-12">
              <ul>
                <li class="dropdown-header">LINK</li>
                <li><a href="#">long link title</a></li>
                <li><a href="#">long link title</a></li>
                <li class="dropdown-header spacer">LINK</li>
                <li><a href="#">Really long link title</a></li>
                <li><a href="#">Longer link title</a></li>
                <li><a href="#">Link title here</a></li>
                <li class="dropdown-header spacer">LINK</li>
                <li><a href="#">Long link title</a></li>
                <li><a href="#">Long link title</a></li>
                <li><a href="#">Long link title</a></li>
                <li><a href="#">Long link title</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OUR RESULTS <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
          </ul>
        </li>
        <li class="dropdown"><a href="#" class="dropdown-toggle">NEWS</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle">LOCATIONS</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle">CONTACT</a></li>

      </ul>
    </div>
  </div>
</nav>

 header {
  text-align: center;
  background: #f5f5f5;
  width: 100%;
  height: 50px;
  padding: 15px 15px;
}
.navbar-brand{
  img{
    width: 160px;
  }
}
header .header-brand {
  color: #777;
  font-size: 18px;
  line-height: 20px;
}

header .header-brand:focus,
header .header-brand:hover {
  text-decoration: none;
  color: #5e5e5e;
}
.navbar-toggle{
  float: left;
}
.icon-bar{
  background-color: #000;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
  float: right;
  right: 0;
  position: absolute;
  margin-top: 10px;
  background: none;
  border: none;
}

.mega-dropdown-menu {
  min-width: 750px;
}

@media (max-width: 767px){
  .navbar-collapse.collapse {
    display: none!important;
  }
}
@media (max-width: 967px) {
  .navbar-header {
    float: none;
  }
  .mega-dropdown-menu ul {
    display: block;
    position: relative;
  }
  .navbar .navbar-toggle {
    float: left;
    margin-left: 15px;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  /* since 3.1.0 */
  .navbar-collapse.collapse.in {
    display: block!important;
  }
  .collapsing {
    overflow: hidden!important;
  }
}

---

JSFIDDLE:

在css媒体查询中使用类似的内容吗@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）和（方向：纵向）和（-webkit最小设备像素比：1）{…css代码…}@LarsMertens-问题是导航当前在992px中断，而在768px之前它不应该进入移动导航。我尝试添加您建议的断点，但没有任何效果。您可能想看看这个：我从那个开始，但我认为引导库中有一些东西可能会覆盖它。然后您需要查看有关css特定性的规则，这就是它被覆盖的原因。您的库需要在style.css之前被调用，因为在级联样式表中，最后一个样式将被应用，加上关于特殊性的规则，所以您应该关注这一点。你确定吗？您应该在调试中检查应用了哪种样式