Фундамент рамки вложенные столбцы

Question

супер-новый для сетей и фонда (я использую 6.3). Я просто хотел проверить, что у меня это было правильно, поскольку мне было трудно проверить официальную документацию.

В основном я пытаюсь центрировать 8 столбцов подряд. Тогда я хочу два столбца внутри этого, один для контента и меньший для боковой панели.

Первоначально я создал следующее, поскольку имело смысл для меня, что столбик большой-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 добавляют до 12 снова, несмотря на то, что они вложены в большой-8.

<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

Второй будет работать в большинстве случаев, но «Фонд» способ делать то, что вы просите (от 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 (хотя это вроде работает без него), потому что вы можете столкнуться с гнездовыми проблемами далее в противном случае вниз.