4

我发现默认情况下，基础会这样做来设置行的样式：

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

但是，作为响应式框架，为什么会被限制在62.5rem？效果惊人的丑陋，它始终是一个固定宽度的盒子，无法随着屏幕的宽度流动。其背后的逻辑是什么？如果我用 100% 覆盖它会怎样？这会导致其网格系统出现问题吗？

谢谢你

4

6 回答 6

3

他们设置了这个限制，因为不是每天都有“全宽设计”；他们（在 Foundation 6 中）引入了修饰符 class .expanded，将它们添加到全宽的行中；如果你想在 Foundation 5 中拥有这种行为，你有两个选择：

1. 创建你的“.expanded”类

Foundation 限制了max-width行的，所以如果你将.expanded类添加到你想要流动的行并添加一些代码，例如：

.row.expanded { max-width: none }

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

2.修改类/更改设置

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

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

于 2017-02-19T04:05:09.243 回答
1

62.5rem 在 Foundation 中相当于 1000px。您可以轻松地覆盖它下载 .css 文件（对我来说这是最好的方法，只是简单的、完全可定制的 css）和第 126 行（基础 5.5.2）你有：

.row {
  margin: 0 auto;
  max-width: 62.5rem;
  width: 100%;
}
于 2015-06-04T00:17:31.997 回答
1

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

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

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

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

在我的例子中，我对最大宽度规则进行了修改，因为我的布局需要为 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/

干杯

于 2016-02-07T07:33:52.173 回答
0

You can use media queries for that...

Example being

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

It won't "break" anything. It's a variable you can change for a reason.

于 2015-05-01T19:45:15.077 回答
0

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

通常我使用 rem-calc(1200) 或 100%

于 2015-04-08T23:16:54.010 回答
0

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

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

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

于 2017-09-29T14:26:34.537 回答