2016-12-04 66 views
0

我已經嘗試了幾種解決方案,但總是有相同的結果。崩潰斷點已更改,但我看不到該按鈕,因此無法摺疊我的菜單。 我正在使用BS 3.3.7。你能看看代碼嗎?非常感謝!更改boostrap導航欄崩潰斷點

HTML:

<nav class="navbar navbar-fixed-top"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="index.html"><img src="img/logo.png" alt="logo"></a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="index.html">abc</a></li> 
      <li><a href="aaa.html">aaa</a></li> 
      <li class="active"><a href="ccc.html">ccc</a></li> 
      <li><a href="sss.html">rrr</a></li> 
      <li><a href="ccc.html">eee</a></li> 
      <li><a href="vvv.html">sss</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav><!-- /.navbar--> 

SCSS

@media screen and (max-width: 991px) { 

.navbar .navbar-nav li .dropdown { 
    width: 100%; 
    margin-bottom: 30px; 
} 

.navbar .navbar-nav li .cart { 
    float: left; 
} 

.navbar .navbar-header { 
    margin-top: 0px; 
} 

.navbar .navbar-header { 
    width: 100%; 
    margin: 0px; 
} 

.navbar .navbar-collapse { 
    width: 100%; 
} 

.navbar-toggle { 
    float: right; 
    margin-top: 20px; 
} 

.navbar .navbar-header .navbar-brand { 
    padding: 5px 15px; 
} 

.navbar-toggle { 
    border: 1px solid #e1e1e1; 
    margin-right: 0px; 

    .icon-bar { 
     background: $light; 
    } 
} 

.navbar .navbar-top { 
    float: left; 

    .cart { 
     float: left; 
     width: 100%; 
    } 

    .btn-group { 
     float: left; 
     width: 100%; 
     margin-left: 0px; 
     margin-top: 10px; 

     .dropdown-toggle { 
      float: left; 
     } 
    } 
} 

.navbar .navbar-nav { 
    width: 100%; 
    float: left; 
    margin: 0px; 
} 

.navbar .navbar-collapse { 
    margin: 0px; 
    padding: 0px; 
} 

.navbar .navbar-nav li { 
    padding: 10px 0px; 
} 

.navbar .navbar-header .navbar-brand { 
    padding-left: 0px; 
} 

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: auto; 
} 

.navbar .navbar-nav li { 
    .dropdown { 

     .dropbtn { 
      padding-left: 0px; 
     } 

     .dropdown-content { 
      display: block; 
      position: relative; 
      box-shadow: none; 
      background: #fff; 

      a { 
       padding-left: 25px; 

       &:after { 
        left:5px; 
       } 
      } 

      a:last-child { 
       padding-bottom: 0px; 

       &:after { 
        top: 10px; 
       } 
      } 
     } 
    } 
} 

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: inherit; 
    overflow-x: hidden; 
} 
} 

回答

1

根據Bootstrap 3 Navbar Collapse

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .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; 
    } 
} 

通過1199pxmd大小隻要改變991px

+0

是的,這個工程,但通常,它也隱藏按鈕,所以我不能點擊並打開我的菜單,因爲沒有按鈕 – JZK

+0

@JZK看到這個:http://www.bootply.com/Wf53bcAyl8 –

+0

bootply工作的很好,但我仍然有同樣的問題,但最終它是固定的。我把你的代碼和我的代碼(上面的代碼)放在一起,將它設置爲991px,並且一切都很好。儘管我不知道如何))...沒關係,謝謝! ... – JZK