Fluid Twitter Bootstrap 2.0 でサイドバーナビゲーションを修正する方法は?-CSSチュートリアル-php.cn

Fluid Twitter Bootstrap 2.0 でサイドバーナビゲーションを修正する方法は?

Susan Sarandon

リリース： 2024-11-11 16:01:02

オリジナル

410 人が閲覧しました

How to Fix the Sidebar Navigation in Fluid Twitter Bootstrap 2.0?

Fluid Twitter Bootstrap 2.0 のサイドバーナビゲーションを修正する

流動的なレイアウトでスクロール中に静止したままになるサイドバーナビゲーションを実現するのは簡単です。

実装

CSS

新しいsidebar-nav-fixed クラスを定義してサイドバーを修正し、左マージンを補うためにコンテンツ div にオフセットクラスを追加します。

.sidebar-nav-fixed {
    position: fixed;
    left: 20px;
    top: 60px;
    width: 250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

ログイン後にコピー

更新されたオプション

レスポンシブな互換性のために、次の CSS を検討してください:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width: auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position: static;
        width: auto;
    }
}

ログイン後にコピー

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav sidebar-nav-fixed">
                ...
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            ...
        </div><!--/span-->
    </div><!--/row-->
</div><!--/.fluid-container-->

ログイン後にコピー

若干の幅があることに注意してくださいコンテナ div から幅を継承していないため、固定サイドバーに不一致があります。

代替方法

モバイルビューでグリッドがドロップされるまでサイドバーを固定したままにするには、次の CSS を使用します。

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position: static;
        width: auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

ログイン後にコピー

以上がFluid Twitter Bootstrap 2.0 でサイドバーナビゲーションを修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。