Foundationフレームワークのネストされた列

Question

グリッドとFoundation（私は6.3を使用しています）に新しい。私は公式の文書と照合するのが難しいと思っていたので、私はこれが正しいと確認したかっただけです。

基本的には、8列を一列に集中させようとしています。次に、コンテンツ内に1つ、サイドバーに2つ小さな列が必要です。

最初は、大8の列が大6と大2を持ち、コンテナの8に足したという意味で私は次のように作成しました。

<div class="row"> 
    <div class="large-8 columns large-centered"> 
     <div class="large-6 columns" style="background-color: red;">1</div> 
     <div class="large-2 columns" style="background-color: green;">2</div> 
    </div> 
</div> 

これは機能しませんでしたが、次のようになります。私が続行する前に、これが私がやりたいことをする正しい方法であるかどうかを確認したいと思いました（大8と大4は大8の中にネストされていますが、やはり12を最大にしています）。

<div class="row"> 
    <div class="large-8 columns large-centered"> 
     <div class="large-8 columns" style="background-color: red;">1</div> 
     <div class="large-4 columns" style="background-color: green;">2</div> 
    </div> 
</div> 

私は

Answer 1

秒1は、ほとんどのシナリオで動作します！これであなたの助けを事前にありがとうございます。私はそれを正しく説明を願っていますが、あなたが求めているものをやっての「財団」の方法（http://foundation.zurb.com/sites/docs/grid.htmlから）次のとおりです。

<div class="row"> 
    <div class="large-8 large-offset-2 end columns"> 
     <div class="row"> 
      <div class="large-8 columns" style="background-color: red;">1</div> 
      <div class="large-4 columns" style="background-color: green;">2</div> 
     </div> 
    </div> 
</div> 

だから：

---

2 col |   8 col   | 2 col 
-------------------------------------- 
     |  8 col  | 4 col | 

.endあなたはネスティングの問題に実行する可能性があるため、単純にスペースを埋めるために空の列を指定しなくても、行を終了し、（それは一種のそれなしで動作しますが）あなたは二.rowを必要としますそれ以外の場合はさらに下ります。