在不破坏现有代码的情况下使用 Zurb Foundation

Question

Foundation 适合创建整个页面设计，但当涉及到要包含在现有代码中的小片段时，它不是一个好的选择 (html、css)。基金会在 _global.scss:

中有这个

html, body {
  height: 100%;
}

// Set box-sizing globally to handle padding and border widths
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  @include box-sizing(inherit);
}

这会破坏现有设计。

我的问题是；我如何将基于 Foundation 的代码片段 div 集成到页面中，利用 Foundation 必须提供的功能（行、列..）而不破坏其他代码。不使用 iFrame。

Answer 1

根据 Global Styles page of the Foundation Docs:

Global Styles

Every Foundation project needs to include these global styles in order to work properly. These include things like basic formatting and global utility classes.

如果你想使用网格，你必须包含 _global.scss 文件，所以你将不得不更新旧布局以支持 box-sizing: border-box 或调整整个布局以工作与基金会。

在不破坏现有代码的情况下使用 Zurb Foundation

Use Zurb Foundation without breaking existing code

html

css

zurb-foundation

Global Styles