2

3 列構成を作成したい:

col1 (スパン 3) - col2 (スパン 8) - col3 (スパン 3)

Col2 は、両側の 1 つの列で col1 と col3 によってオーバーラップする必要があり、それらは同じ行にある必要があります。Twitter ブートストラップ レスポンシブ グリッドを使用してこのコンポジションを作成する最良の方法は何ですか?

4

1 に答える 1

0

次の 3 つのオプションがあります。

  • グリッドが 12 ではなく 16 だった Twitter Bootstrap v1.XX を使用します。

最新の v1.X (1.4.0) の古いドキュメント: http://bootstrapdocs.com/v1.4.0/docs/

v1.4 ブートストラップ ファイルについては、https://github.com/twitter/bootstrap/zipball/v1.4.0

  • Bootstrap v2.XX ビルドをカスタマイズする

ここでは、すべてをカスタマイズしてカスタム ビルドを作成します: http://twitter.github.io/bootstrap/customize.html

span*Ps .:カスタマイズ オプションを使用する場合、HTML ファイル内のすべての構成をやり直す必要があるでしょう。つまり、14 (または 16) 列に変更し、マージン/パディングに新しい値を設定します。

（カスタマイズを指摘してくれてありがとう@jmeas、それを忘れていました）。

  • 重複する可能性があると言ったので、デフォルトのビルドを使用して以下を使用できます。

私がしたことは、offset*クラスを取得してoffset-*、負の値を持つ , を作成することでした。

HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span3">xx</div>
        <div class="span8 offset-1">yy</div>
        <div class="span3 offset-1">zz</div>
    </div>
</div>

CSS:

.row-fluid .offset-1 {
    margin-left: -10.638297872340425%;
    *margin-left: -10.53191489361702%;
}
.row-fluid .offset-1:first-child {
    margin-left: -8.51063829787234%;
    *margin-left: -8.404255319148938%;
}

「 12グリッド」を維持しながら、いくつかのRGBA色を追加して、それらが重なっているのを確認できるようにしました。

于 2013-05-20T17:20:35.233 に答える