Wiederherstellung erweitert responsive navbar Menü erstellt Bildlaufleiste in der Bootstrap 3.0.2

Der folgende code funktioniert wie erwartet mit Bootstrap 3.0.0 CSS-Datei, aber wenn Sie es mit Bootstrap 3.0.2 CSS (und ich denke, 3.0.1, auch), es funktioniert nicht richtig unter den folgenden Szenario:

  • Seite öffnen.
  • Größe browser-Fenster (kleiner machen), um die trigger-responsive Menü.
  • Erweitern Sie Menü, so zeigt es Untermenüs 1 und 2.
  • Größe browser-Fenster (machen Sie es größer) auslösen normalen Menü.

Das erweiterte Menü nicht angezeigt auf der Seite. Es sieht aus wie seine Höhe ist in der Höhe der navbar, so zeigt es mit scrollbars. Von diesem Punkt auf das drop-down-Menü nicht drop über den unteren Rand der Navigationsleiste, so dass Sie müssen verwenden Sie die Bildlaufleiste zum navigieren.

Wenn Sie auf die 3.0.0 version der bootstrap-CSS, dann funktioniert es einwandfrei. Ich versuchte es mit beiden Versionen der Bootsrap JS-Datei, und es scheint nicht zu keinen Unterschied machen.

Hier ist der komplette HTML-code:

<!DOCTYPE html>
<html lang="en-us"> 
<head>
<!--<link  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css">-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/jscript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
<style>
body {
    padding-top: 50px;
}
</style>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
</div>
</div>
</div>
<h1>Hello!</h1>
</body>
</html>

ist dies ein bekanntes Problem mit Bootstrap oder mache ich etwas falsch?

InformationsquelleAutor Alek Davis | 2013-11-26
  1. 8

    Dies ist ein bekanntes Problem in 3.0.2 (https://github.com/twbs/bootstrap/issues/11243)

    Einen workaround:

    .navbar-collapse.in {
    overflow-y: visible;
}

    Demo: http://bootply.com/96924

    • Oh, süß. Ich danke Ihnen so sehr. Ich wurde immer verzweifelter.
    • Kein problem! Ich hoffe, dass Sie es zu beheben in der nächsten Version.
    InformationsquelleAutor Zim
Schreibe einen Kommentar