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">

感谢您的帮助！

你应该检查你的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/

希望这有助于！

感谢您的帮助，这固定了它！ – 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>

Foundation 6栅格列总是100％宽

相关推荐