☰

Bootstrap 3.0 - 固定列サイズを含む可変グリッド 質問する

tag-icon • tag-icon twitter-bootstrap twitter-bootstrap-3
Bootstrap 3.0 - 固定列サイズを含む可変グリッド 質問する

私は Bootstrap の使い方を学んでいます。現在、レイアウトをいろいろ試しています。Bootstrap はなかなかすばらしいのですが、目にするものすべてが時代遅れに感じられます。どうにも、基本的なレイアウトだと思っているのですが、理解できません。私のレイアウトは次のようになります。

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

このグリッドはウィンドウの高さ全体を占める必要があります。私の理解では、固定幅と可変幅を混在させる必要があります。しかし、Bootstrap 3.0 には可変クラスがもうないようです。あったとしても、可変列サイズと固定列サイズを混在させる方法がわかりません。Bootstrap 3.0 でこれを行う方法を誰か知っていますか?

ベストアンサー1

編集：多くの人がこれをやりたいようですので、より一般的な使用例を記載した短いガイドをここに書きました。https://www.atlascode.com/bootstrap-fixed-width-sidebars/。

bootstrap3 グリッド システムは行のネストをサポートしており、ルート行を調整して固定幅のサイド メニューを許可できます。

ルート行に padding-left を配置し、通常のグリッド レイアウト要素を含む子行を配置する必要があります。

私はいつもこうやってますhttp://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

css

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

おすすめ記事