一起使用 Bootstrap 和基础？答案

【问题标题】：using Bootstrap and foundation together?一起使用 Bootstrap 和基础？
【发布时间】：2013-02-08 23:24:26
【问题描述】：

我正在使用 twitter 引导程序进行布局和 css。但我喜欢 bootstrap 提供的基础顶部栏导航。我试图在我的 html 中使用顶部条形码（使用引导程序构建），它弄乱了布局。这并不奇怪，因为它们都广泛依赖于名为“row”的类，并且它们具有不同的属性。

我可以考虑的一个选项是在我的样式表中以某种方式覆盖行类，但这工作量太大而且看起来不正确。

其他选项可能正在使用 iframe。

有没有其他方法可以解决这个问题？

【问题讨论】：

【解决方案1】：

理想情况下，您只需要使用 Foundation 的顶部栏 CSS 和 JS 代码，因为这是您要使用的唯一组件。 Here is the SCSS 文件（依赖于在_settings.scss 中声明的变量。或者您可以使用generated CSS code。

如果您仍需要使用.row，只需复制.row 样式并将其命名为不同的名称。即：

/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }

最后，不要忘记包含jquery.foundation.topbar.js 文件并调用

$(document).foundationTopBar();

【讨论】：

【解决方案2】：

老问题，但如果有人正在寻找无缝解决方案，我想我会分享最新的：Web 组件

这是一个更复杂的主题，但允许您在完全隔离的 Shadow DOM 中创建小部件，而无需覆盖任何东西。阅读更多关于它的信息 here 和 here。然后你就可以做这样的事情了：

<template id="templateContent">
     <style> @import "css/generalStyle.css"; </style>
</template>

【讨论】：

【解决方案3】：

为此使用 iframe 是个坏主意。如果您喜欢 Foundation 顶部栏的样式，只需将这些样式复制到样式表中的自定义类中即可。

请注意，您可能需要覆盖一些 Bootstrap 的默认样式才能使顶部栏正确。

【讨论】：