boostrap navbar崩壊ブレークポイント

Question

私はいくつかの解決策を試しましたが、常に同じ結果があります。折りたたみブレークポイントは変更されていますが、ボタンが表示されないのでメニューを折りたたむことはできません。 私はBS 3.3.7を使用しています。あなたはコードを見ていただけますか？どうもありがとうございます！

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; 
} 
} 

Answer 1

だけmdサイズの1199pxで991pxを変更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; 
    } 
} 

によります。