css - 一起使用 Bootstrap 和基础？

Question

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

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

其他选项可能是使用 iframe。

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

Answer 1

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

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

/* 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 中创建小部件，而不会覆盖任何东西。在此处和此处阅读有关它 的更多信息。然后你就可以做这样的事情：

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

取自这个答案

Answer 3

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

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