Bootstrap des navbar Dropdown öffnet nicht richtig unter benutzerdefiniertem Stützpunkt

Question

I angewandt, um den folgenden Code benutzerdefinierten Break-Punkt Schopf aus dem Sumpf navbar in dieser Frage diskutiert zu erreichen: Bootstrap custom breakpoint

@media (max-width: 1000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

Die navbar kollabiert unter dem benutzerdefinierten Break- Punkt @media (max-width: 1165px) aber das Dropdown-Menü wird nicht korrekt geöffnet.

Obwohl, für Standard-Haltepunkt des Bootstrap (768px) es funktioniert korrekt.

Kann anybuddy mir sagen, warum es für benutzerdefinierte Haltepunkt nicht funktioniert. Ist es ein bootstrap jquery/Javascript Problem? Wie es richtig für benutzerdefinierten Haltepunkt ablegen.

dank dk

Answer 1

Die bootstrap.css Datei den folgenden Code enthält:

@media (max-width: 767px) { 
    .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; 
    } 
    .navbar-nav .open .dropdown-menu > li > a, 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
    padding: 5px 15px 5px 25px; 
    } 
    .navbar-nav .open .dropdown-menu > li > a { 
    line-height: 20px; 
    } 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
    background-image: none; 
    } 
} 

So können Sie diesen Code für die Suche nach Medien verwenden @media (max-width: 1000px) (oder @media (max-width: 1065px) wenn Sie benötigen).

Ich habe dieses CSS auf die Default navbar angewendet. Bitte überprüfen Sie das Ergebnis: https://jsfiddle.net/glebkema/zd9axad0/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (max-width: 1000px) { 
 
    /* dropdown */ 
 
    .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; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a, 
 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
 
    padding: 5px 15px 5px 25px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a { 
 
    line-height: 20px; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    background-image: none; 
 
    } 
 
    
 
    /* collapse */ 
 
    .navbar-header { 
 
     float: none; 
 
    } 
 
    .navbar-left,.navbar-right { 
 
     float: none !important; 
 
    } 
 
    .navbar-toggle { 
 
     display: block; 
 
    } 
 
    .navbar-collapse { 
 
     border-top: 1px solid transparent; 
 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
 
    } 
 
    .navbar-fixed-top { 
 
     top: 0; 
 
     border-width: 0 0 1px; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: none!important; 
 
    } 
 
    .navbar-nav { 
 
     float: none!important; 
 
     margin-top: 7.5px; 
 
    } 
 
    .navbar-nav>li { 
 
     float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
     padding-top: 10px; 
 
     padding-bottom: 10px; 
 
    } 
 
    .collapse.in{ 
 
     display:block !important; 
 
    } 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>