一起使用Bootstrap和基础？

Question

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

我能想到的其中一个选择是在我的样式表中覆盖行类，但这样做太多了，看起来不对。

其他选项可能是使用iframe。

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

Answer 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();

Answer 2

老问题但我想如果有人在寻找无缝解决方案，我会分享最新信息：Web Components

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

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

取自this answer

Answer 3

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

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