6

ブートストラップを使用して、サイドバーの div を折りたたむことはできますか (モバイルのみ)? 画像の例のようなことをするにはどうすればよいですか? そのため、モバイルではサイドバーが折りたたまれ、クリックすると展開されます。jqueryが関係しているため、メディアクエリでこれを行う方法がわかりません。

http://i46.tinypic.com/2mzxflu.jpg

ここで同様の質問をいくつか見ましたが、まったく同じものはありません。誰かが説明したり、少なくとも私を正しい方向に向けたりできますか? 前もって感謝します。

4

3 に答える 3

5

私はこの問題に出くわし、そのための CSS クラスを追加しました。

.collapse-non-md {
    height: 0;
    display: none;
}
.collapse-non-md.collapsing {
    display: block;
}

@media (min-width: 992px) {
    .collapse-non-md {
        height: auto;
        display: block;
    }
}

次に、中以下の画面で折りたたみたい要素のクラスを設定しcollapse-non-md、ほら、小さなブラウザで折りたたまれ、中程度のブラウザで開きます。通常の方法で開いたり閉じたりすることができます (.inクラスは をオーバーライドします.collapse-non-md)。

于 2015-04-02T21:02:02.103 に答える
1

手っ取り早い方法: デスクトップ画面に表示するフル サイズのサイドバーのコードを記述し、折りたたまれたサイドバーをモバイル デバイスに表示する別のマークアップを作成することです。

次に、サイドバーのいずれかのバージョンをいつ表示するかを選択するには、ブートストラップによって提供されるクラスを使用して、メディア クエリに基づいてコンテンツを非表示および表示します。

折りたたまれたサイドバー:.hidden-desktop .hidden-tablet .visible-phone

フルサイドバー:hidden-phone .visible-tablet .visible-desktop

于 2013-01-23T01:34:52.707 に答える