Zurb基金會4 - 嵌套的網格對齊問題

我一直在嘗試使用基金會4網格對齊嵌套的行，到差不多無濟於事。Zurb基金會4 - 嵌套的網格對齊問題

僅供參考，我使用EpiServer CMS，所以我必須使用mixins注入某些樣式。

問題是，當我在我的8列注入div#content內部嵌入div.row，該行&其列不與其外部的元素齊平。

我試着添加這個mixin：div.unmanagedContent {@include grid-row(nest);}，它在這個例子中起作用，但是當在div#content裏面沒有嵌入.row時，負邊距會拉出該div。

我的SCSS看起來像這樣。請注意，我只是在CodePen連接外部CSS，所以你會看到輸出的樣式：

// 12 total columns 

.contentLayoutBox { 
@include grid-row; 
} 
#content { 
@include grid-column(8); 
} 
#sidebarRight { 
@include grid-column(4); 
}

這裏的an example在CodePen &的Foundation 4 Grid Docs。

任何幫助將是偉大的。謝謝。

來源

2014-01-29 Todd

我看着CodePen，看了你的描述，仍然不確定你想要解決什麼問題。您是否試圖將標題「嵌入.row」及其隨附的Lorem ipsum與「這是嵌入式div.row之外」完全一致？ –

嗨@ChrisPeters。是!試圖解釋它並不容易，但這是問題所在。 – Todd

再次感謝@Chris Peters。答案現在看起來很簡單。

你是正確的，只有頂部行類應該有混入@include grid-row及其死者應該嵌套@include grid-row(nest)，所以這裏就是我所做的：

.one-main-row-class, .another-main-row-class { 
    @include grid-row; 
    //Nest decendents of the top-level grid-row 
    .row { 
    @include grid-row(nest); 
    } 
}

來源

2014-03-18 22:59:36 Todd

::奧利弗扭曲的聲音::你能至少給我一個票加我的麻煩嗎？ :) –

如果我有代表。 – Todd

明白了。沒問題。 :) –

我希望能看到更多的Sass代碼等，但我的猜測是，您需要在嵌套行的所有上使用nest行爲。

在我看來，基金會在Sass中的行主要是爲了在一個層面上使用而設計的。嵌套在另一行中的任何行都應使用nest行爲，除非您需要列上的額外填充。

在你CodePen，我能夠通過添加類的collapse到所有行，我相信的修復與列填充的問題是一樣的無禮之內做$behavior: nest：

<div class="unmanagedContent"> 
    <div> 
    <div class="row collapse"> 
     <div class="small-12 columns"> 
     <div class="row wtf collapse"> 
      <div class="small-12 columns"> 
      <h2>Embedded .row</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

如果我嘗試用薩斯混入的風格這一點，這是我會做什麼？

HTML：

<div class="layout-unmanaged-content"> 
    <div class="layout-content"> 
    <div class="layout-embedded-row"> 
     <div class="layout-content"> 
     <h2>Embedded .row</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p> 
     </div> 
    </div> 
    </div> 
</div>

薩斯：

.layout-unmanaged-content { 
    // You'll need to have the nest here if this is within another Foundation row. 
    @include grid-row(nest); 

    > .layout-content { 
    @include grid-column(12); 
    } 
} 

.layout-embedded-row { 
    @include grid-row(nest); 

    > .layout-content { 
    @include grid-column(12); 
    } 
}

來源

2014-03-05 20:38:28

Zurb基金會4 - 嵌套的網格對齊問題

回答

相關問題