Twitterブートストラップグリッドが期待通りに機能しない

Question

私はTwitterのブートストラップに基づいてプレミアムWordpressのテーマを使用しています。テーマはStrapPressです。 私はグリッドについて行って、非常に基本的な方法で設定しようとしていますが、グリッドは奇妙な方法で動作しています。 私が欲しいのは、9つの列と3つのサイドバーで構成されるメインコンテンツセクションです。 9つの列の中で、コンテンツの異なる領域で入れ子になった列を持つことができるようにしたいと考えています。最初のセクションは9つの列全体になり、その下のコンテンツは3つの等しいセクションに分割されます。

次のコードは、9列の最初のセクションなしで罰金、それを設定します：

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

「redBorderはちょうど可視化を支援するために、すべての周りに1pxの赤い境界線を追加します。

ただし、次のセクションを追加するとすぐ下のコンテンツに影響します。ここでは、新しいコードされています

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="searchSection redBorder" style="height: 100px;"> 
      SEARCH SECTION 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

は、ここでは、その後、次のようになります。それはこれをやっている理由

誰もが知っていますか？ なぜこれらの9つの列の先頭にいくつかのコンテンツを追加すると、下にある列は、もはやそれらのコンテナに収まらないような方法で埋め込みを追加する必要がありますか？

Answer 1

これは、ブートストラップのCSSで、特にこの規則、なぜならグリッドは、行およびスパンで動作する方法は次のとおりです。

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
} 

そこで最初にコンテンツを追加すると、他のスパン*要素が前にマージンを得ることを意味する理由それら。 searchSectionは全幅なので、最初のspan4は次の行に折り返して余白があります。あなたが検索部全幅をしたいと仮定すると、行くための安全な方法はspan4sの周りに別の行流体を置くことになります：

<div class="searchSection redBorder" style="height: 100px;"> 
     SEARCH SECTION 
    </div> 

    <div class="row-fluid"> 
     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 
    </div> 

</div> <!-- END OF MAIN CONTENT --> 

これも一種-のあるドキュメント内のネスト列のセクションで説明した、http://twitter.github.com/bootstrap/scaffolding.html#gridSystem 。