設置引導程序導航斷點以在ipad肖像上顯示移動導航

無法在iPad縱向和縱向上設置引導程序導航和子導航的斷點。我需要的導航顯示在iPad上的畫像和iPhone縱向和橫向的移動版本，但目前還是堅持了下來顯示在iPad上的畫像桌面子導航：設置引導程序導航斷點以在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; 
    } 
}

來源

2017-02-09 Matt

什麼時候你想讓它休息？ 967？ – muratkh

@ muratkh - 它應該在967處中斷，以便主導航和subnav的移動版本僅在iPad肖像和iPhone縱向/橫向上顯示。 – Matt

我做什麼，我不知道你是使用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; 
    } 
}

來源

2017-02-09 20:54:18 muratkh

嗯，subnav在移動設備上正確顯示，但在平板電腦縱向上它仍然像在桌面上一樣顯示。 – Matt

這就是因爲你必須在斷點內爲你的巨型下拉菜單添加一個display：block。 – muratkh

或更改寬度 – muratkh

我發現的解決方案是設置一個新的斷點：

@media (max-width: 800px){ 
.navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
}

帶來iPad上的肖像子導航到同iPhone的畫像。

來源

2017-02-15 18:13:07 Matt

設置引導程序導航斷點以在ipad肖像上顯示移動導航

回答

相關問題