Foundation 6柵格列總是100％寬

我目前正在爲其使用基礎6的項目工作。我有這個奇怪的問題，我的列垂直堆疊（它們都是100％寬度的屏幕）Foundation 6柵格列總是100％寬

非常簡單的代碼，我用的是這個：

<div class="row"> 
    <div class="small-2 large-4 columns"><!-- ... --></div> 
    <div class="small-4 large-4 columns"><!-- ... --></div> 
    <div class="small-6 large-4 columns"><!-- ... --></div> 
</div>

這是從基礎網站上的基本網格的例子直接複製。我確信我已正確鏈接到樣式表，因爲即使使用樣式表的完整路徑，這種情況仍在繼續。

<link rel="stylesheet" href="css/foundation.css"> 
<link rel="stylesheet" href="css/app.css">

感謝您的幫助！

來源

2017-08-17 Bram

你應該檢查你的div在chrome的檢查器中，並檢查哪個css規則最後適用於你的div。我相信你的一個自定義css規則會覆蓋基金會的規則。 –

@PierreBurton感謝您的提示，但app.css仍然是空的，所以很遺憾沒有解決問題。 – Bram

這是因爲基金會的最新版本帶有自己XY網格啓用，它不會調用類的CSS「小2大4列」！

如果您使用SASS，只需在包含中將參數設置爲false，但我認爲您只是使用CSS，所以如果您只是重新下載自定義版本，然後只檢查'浮動柵格'就會得到你回到舊的網格系統，你的代碼應該工作！

如果您想了解更多關於新的XY網格繼承人的鏈接：http://foundation.zurb.com/sites/docs/xy-grid.html

而且繼承人的鏈接，下載定製的基礎版本： https://foundation.zurb.com/sites/download/

希望這有助於！

來源

2017-08-18 15:07:34

感謝您的幫助，這固定了它！ – Bram

我不能評論，因爲我的代表是50歲以下，但我想說我也有這個問題。從網站Downloaded Foundation 6，我擁有所有文件，並且我沒有觸及app.css文件。這裏是我的代碼兩列在100％的寬度。

<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Foundation for Sites</title> 
    <link rel="stylesheet" href="css/foundation.min.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 
    <div class ="row " style= "background-color: aqua"> 
     <div class = "small-6 large-6 columns" style= "background-color: lightblue">content</div> 
     <div class = "small-6 large-6 columns">more content</div> 
    </div> 

    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body> 
</html>

來源

2017-08-17 17:22:15 philipbusacco

Foundation 6柵格列總是100％寬

回答

相關問題