Question

我发现默认情况下，基金会会对行进行样式设置：

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;
}

然而，作为一个响应式框架，为什么它仅限于62.5rem？效果令人惊叹难看，这是一个固定宽度的盒子，无法随着屏幕的宽度流动。它背后的逻辑是什么？如果我用100％覆盖它怎么办？这会导致其网格系统出现问题吗？

谢谢

Answer 1

他们设定了这个限制，因为不是每天都有“全宽设计”;他们（在基础6中）介绍了修饰符类.expanded，它们添加到行中它们变成全宽;如果您想在Foundation 5中拥有该行为，您有两个选择：

<强> 1。创建'.expanded'类

基础会限制行的max-width，因此如果您将.expanded类添加到要包含流量的行并添加一些代码，例如：

.row.expanded { max-width: none }

你可以让它工作......可能需要额外的代码让嵌套的行正常工作。

<强> 2。修改课程/更改设置

Foundation是一个非常可定制的框架，如果您使用的是SASS版本，则可以轻松地将变量$global-width修改为100％。如果您使用的是预建版本，只需在代码中找到.row声明，然后将max-width修改为100％。

就是这样，希望这会有所帮助。

Answer 2

您可以将其更改为您想要的任何宽度，而不会伤害任何东西。它只会使你的列更宽。

通常我使用rem-calc（1200）或100％

Answer 3

您可以使用媒体查询...

示例是

@media #{$large-up} {
   $row-width: 100%;
 }

它不会打破＆＃34;打破＆＃34;任何东西。它是一个你可以改变的变量。

Answer 4

62.5rem在基金会相当于1000px。您可以轻松覆盖它下载.css文件（对我来说这是最好的方法，只是普通的，完全可自定义的css）和第126行（foundation 5.5.2），你有：

.row {
  margin: 0 auto;
  max-width: 62.5rem;
  width: 100%;
}

Answer 5

在CSS3中引入了一个新单元，最初用于字体大小调整，rem代表“root em”并且相对于root（html）。

为大多数浏览器定义了16px的基值，因此1rem等于16px。然后你得到62.5rem等于1000px。

我想width:100%规则可能是不支持rem单元的浏览器的处理程序错误。

如果需要，您可以更改行的宽度，只需删除或注释max-width规则即可。然后将根据需要渲染100％。例如，Bootstrap为容器设置了960px的宽度。

在我的情况下，我对max-width规则进行了修改，因为我的布局需要为1366px，所以我将该值转换为85.375rem。

.row {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 0;
     margin-bottom: 0;
     max-width: 85.375rem; // 1366px width for example
}

看一下这篇文章，阐明你对rem的看法： http://www.sitepoint.com/understanding-and-using-rem-units-in-css/

欢呼声

Answer 6

如果您不确定是否也可以使用已从自定义基础构建器设置的所有参数启动项目： https://foundation.zurb.com/sites/download.html/#customizeFoundation

我将以1200px的宽度开始为我的内容举例，所以我计算： 1200/16 = 750rem

无论如何，移除任何最终都不会使用的组件是个好主意。

62.5rem背后的逻辑，用于基础5中行的最大宽度

6 个答案: