wake-up-neo.net

Erstellen Sie in Bootstrap eine feststehende Unterseite, in der der Inhalt beim Umschalten nach oben verschoben wird

Ich habe zwei Navigationsleisten auf meiner Website, eine in der Kopfzeile und die andere in der Fußzeile

Der Header-Teil funktioniert gut, aber ich möchte, dass die Fußzeile der Navigationsleiste ähnelt. Wenn ich in die mobile Ansicht (kleinerer Ansichtsbereich) gehe, gibt es eine Schaltfläche zum Umschalten (Standard-Bootstrap-Funktion), aber wenn Sie auf diese Schaltfläche klicken, wird sie nach unten verschoben , und der Inhalt wird unterhalb der Navigationsleiste angezeigt, also aufwärts. Kann mir jemand dabei helfen?

Ich weiß nicht, wie man Bootstrap in Fiddle einbindet, also direkt meinen Fußcode posten. Es enthält Bootstrap-Dateien und Fontawesome-Dateien direkt in meinem.

Bootply link: http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
13
Deepak Yadav

Ich konnte dies durch einfaches Ändern der Reihenfolge erreichen. Anstatt den Navbar-Header vor den reduzierten Elementen zu platzieren, setzen Sie ihn nach. Auf diese Weise sind Sie nicht auf die Positionierung angewiesen und erhalten keinen Flash/Sprung, während die Kopfleiste und die Erweiterungsschaltfläche nach unten verschoben werden.

Hier ist eine Demo: http://www.bootply.com/117444

Alles, was ich getan habe, war, das div-Element mit der Schaltfläche "collapse items" vor dem "header" -Div zu verschieben

19
Tanner Lindsay

Wenn ich Ihre Frage verstanden habe, soll das Toggle-Menü oben und nicht unter dem Toggle-Button angezeigt werden. Dazu müssten Sie das collaspe-Menü absolut positionieren.

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Bootply-Demo: http://bootply.com/103653

1
Zim

Fix Skelly Lösung.

Fügen Sie ein weiteres CSS hinzu:

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg

1
Akairis