web-dev-qa-db-ja.com

bootstrapに切り替えてコンテンツを上にスライドさせる、固定から下へのナビゲーションバーを作成します。

ウェブサイトに2つのnavbarがあります。1つはヘッダーに、もう1つはフッターにあります

ヘッダー部分は正常に機能していますが、フッターはnavbarに似ている必要がありますが、モバイルビューに移動すると（小さいビューポート）、トグルボタンが表示されます（デフォルトbootstrap機能）そのトグルをクリックすると、下にスライドし、コンテンツがナビゲーションバーの下に表示され、上に向かって動きます。

BootstrapをFiddleに含める方法がわからないので、フッターコードを直接投稿します。これには、bootstrap=ファイルとFontawesomeファイルが直接含まれます。

入手済み 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>
javascriptjquerytwitter-bootstraptwitter-bootstrap-3navbar
13
Deepak Yadav

順序を変更するだけで、これを機能させることができました。折りたたみ項目の前にnavbar-headerを配置する代わりに、後に配置します。そうすれば、ヘッダーバーとエキスパンドボタンが下に移動する間、位置に依存せず、フラッシュ/ジャンプを取得しません。

デモは次のとおりです。 http://www.bootply.com/117444

私がしたことは、ボタンで「ヘッダー」divの前に折りたたみ項目divを移動することだけでした

19
Tanner Lindsay

あなたの質問を理解したら、トグルメニューをトグルボタンの下ではなく上に表示する必要があります。そのためには、Collaspeメニューを絶対位置に配置する必要があります。

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

Bootplyデモ： http://bootply.com/10365

1
Zim

Skellyソリューションを修正します。

CSSをもう1つ追加します。

@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