9

セクションの 1 つでパディングを使用して、ネストされた Bootstrap レイアウトを作成するにはどうすればよいですか?

以下に図を示します。#main-containerで Bootstrap divをラップすると.span12、機能します。しかし、これは幅#main-contentよりも 40px 薄い.span12ことを意味します。つまり、Boostrap グリッドを内部で使用することはできません。(たとえば、#left-columna.span9と#right-columnaを作成できれば素晴らしいの.span3ですが、できません。)

このレイアウトを作成するより良い方法はありますか?

レイアウト図

4

1 に答える 1

11

パディングで何を達成したいかによると思います。

たとえば、パディングによって提供されるスペースに背景が必要な場合は、実際のパディングが必要です。しかし、一方で、スペースが必要な場合は、元のグリッドに固執できるはずです (.spanコンテナーの代わりに子にマージンを与えます)。

レイアウトに基づいて、流動的なソリューションは明らかに適応性が高く、実装が簡単です。

パディングされた要素内の流体グリッドを利用します:デモ (jsfiddle)

<div class="container">
    <div class="row">
        <div class="span12" id="header">#header</div>
    </div>
    <div id="main-container">
        <div class="row-fluid">
            <div class="span12" id="main-content">#main-content</div>
        </div>
        <div class="row-fluid">
            <div class="span9" id="left-column">#left-column</div>
            <div class="span3" id="right-column">#right-column</div>
        </div>
    </div>
</div>

更新より明確な境界線と背景を追加しました:境界線のデモ (jsfiddle)

#main-container {
    padding: 20px;
    border: 3px solid red;
    background: yellow;
}
#main-container > .row-fluid { background: white; }
于 2012-07-28T01:20:40.170 に答える