埋め込みブートストラップレイアウトの埋め込み

Question

どのセクションで埋め込みブートストラップレイアウトを作成できますか？

イラストは以下のとおりです。ブートストラップのdivでを.span12で囲んでも動作します。しかし、これはが.span12幅よりも40px細くなっていることを意味します。つまり、内部にBoostrapグリッドを使用することはできません。 （例えば、#left-column.span9と.span3#right-columnを作るために、それは素晴らしいことだが、私がすることはできません。）

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

Answer 1

私はそれが本当にあなたがパディングを達成したいかに依存だと思います。

たとえば、パディングによって提供されるスペースに背景が必要な場合は、実際にはパディングが必要です。 一方、ある程度のスペースが必要な場合は、元のグリッドに固執する必要があります（コンテナではなく.spanの子供に余白を与えます）。

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

は、パッド入りの要素内部の流体グリッドを利用しています：Demo (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> 

更新は、より明示的な境界線と背景を追加しました：Border demo (jsfiddle)

#main-container { 
    padding: 20px; 
    border: 3px solid red; 
    background: yellow; 
} 
#main-container > .row-fluid { background: white; }