css - 设置引导导航断点以在 ipad 纵向上显示移动导航

Question

在 iPad 纵向和向下设置引导导航和子导航的断点时遇到问题。我需要导航在 iPad 纵向和 iPhone 纵向和横向上显示移动版本，但目前坚持在 iPad 纵向上显示桌面子导航:

所以它在 iPad 竖屏上应该是这样的:

它在这里起作用:jsfiddle link , 尽管直到 768px 才发生崩溃。但是，我无法在我的代码中使用它。

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="#">Brand</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-sm-4 image-column">
              <ul>

                <div class="carousel-inner">
                  <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 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-sm-4">
              <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-sm-4">
              <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>

CSS:

header {
  text-align: center;
  background: #f5f5f5;
  width: 100%;
  height: 50px;
  padding: 15px 15px;
}

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 .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: 800px;
}

@media (max-width: 967px) {
  .navbar .navbar-toggle {
    float: left;
    margin-left: 15px;
  }
  .icon-bar{
     background-color: #000;
  }
}

Answer 1

我做了什么，我不知道你在使用 4 列，所以我改变了它们 LG 4 XS 12 将 MINWIDTH 更改为 750

HTML

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <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="#">Brand</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">
                    <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>

CSS

 header {
  text-align: center;
  background: #f5f5f5;
  width: 100%;
  height: 50px;
  padding: 15px 15px;
}

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 .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: 967px) {
  .navbar .navbar-toggle {
    float: left;
    margin-left: 15px;
  }
  }
@media (max-width: 967px) {
    .navbar-header {
        float: none;
    }
   .mega-dropdown-menu ul{
     display: block;
     position: relative;
}
    .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;
    }
}