4

この質問が既に回答されている場合は申し訳ありませんが、私が欲しいものを正確に見つけることができませんでした。

A List Apart の Holy Grail Layout に似たレスポンシブ レイアウトを作成しようとしています。

左側に固定幅の列、中央に可変幅の列、右側に固定幅の列があります。右側の列は、特定の幅を超えるウィンドウでのみ表示され、全体は特定のサイズまでしか拡大されません。

ここで必要なことを正確に行うjsFiddleを作成しました。

私の基本的な HTML は次のようになります。

<h1>Window Width: <span></span></h1>
<div id="container">

    <div id="center" class="column">
        <h1>Two</h1>
        <p>Width: <span></span></p>
    </div>

    <div id="left" class="column">
        <h2>One</h2>
        <p>Width: <span></span></p>
    </div>

    <div id="right" class="column">
        <h2>Three</h2>
        <p>Width: <span></span></p>
    </div>

</div>

私の質問は、Bootstrap のようなものでこれを行うことは可能でしょうか。可能であれば、モバイル デバイスで動作させる必要があるため、時間を節約できると思いますが、単一の Bootstrap レイアウトで固定列と非固定列を組み合わせる方法がわかりません。

4

1 に答える 1