css - Bootstrap の 3 列レイアウトのスタッキングの問題

Question

Bootstrap で 3 列のレイアウトを使用しており、右側にナビゲーション、コンテンツ、およびウィジェットがありますが、画面がモバイル ビューの場合は次のようにレイアウトをスタックする必要があります。ナビゲーション ウィジェットとコンテンツについて教えてください。

希望するデスクトップおよびモバイル レイアウトの順序については、画像を参照してください。

Answer 1

モバイルに適した順序でブロックを配置します。次に、「ウィジェット」を右に引っ張ります。

<div class="container">
    <div class="row">
        <div class="span3 custom-nav"></div>
        <div class="span3 custom-widget pull-right"></div>
        <div class="span6 custom-content"></div>
    </div>
</div>​

モバイルの場合、フロートをリセットします。

@media (max-width: 767px) {
    [class*="span"].pull-right {
        float: none;
    }
}

さらにいくつかのこと：

• ここではプレフィックスを使用しcustomて、Bootstrap の定義済み.navおよび.contentクラスに遭遇しないようにしています。
• fiddleでどのように機能するかを確認してください。
• 私が回答した関連する質問を確認してください。
• スタックオーバーフローへようこそ。