如何更改寬度時列使用zurb基礎模板崩潰

Question

我正在使用zurb基礎this template。

這是一個3列模板，當窗口寬度變爲1000像素左右時，這些列會摺疊。

但我不想讓它們崩潰到700像素。我該如何改變它？

在rails環境中，我改變了這個樣子，但似乎沒有發生任何事情。

// foundation_and_overrides.scss

- // $row-width: rem-calc(1000); 
+ $row-width: rem-calc(700); 

如果可能的話我想刪除[ad]列當寬度下1000像素下700像素時崩潰。如果實現並不困難，我更喜歡這種行爲。

Answer 1

看起來你在這裏遇到兩個問題。

首先，您參考的模板使用網格類medium。當屏幕尺寸達到medium斷點時，他們使列變爲全寬。這裏的行如何設置程序的模板：

<div class="row"> 
    <div class="large-3 columns"> 
    <!-- Content Here --> 
    </div> 
    <div class="large-6 columns"> 
    <!-- Content Here --> 
    </div> 
    <div class="large-3 columns"> 
    <!-- Content Here --> 
    </div> 
</div> 

要改變此列保持固定，直到大約700像素，你可以列類更改爲：

<div class="row"> 
    <div class="medium-3 columns"> 
    <!-- Content Here --> 
    </div> 
    <div class="medium-6 columns"> 
    <!-- Content Here --> 
    </div> 
    <div class="medium-3 columns"> 
    <!-- Content Here --> 
    </div> 
</div> 

第二個問題是media-query斷點。默認情況下，$small-range大小爲0-40em。根據您設置$rem-base的內容，您可能需要適當更改範圍。

例如，如果您的$rem-base是默認的16px，這意味着您的網格會摺疊爲16px * 40 = 640px的單個列（使用上述HTML）。

如果您希望它在700px處摺疊，並且您的$base-rem爲16px，您需要將$small-range更改爲(0em, 43.5em)。