Question

我正在使用osCommerce Bootstrap软件包建立一个在线商店，将其集成到一个已经建立的网站设计中 - 这很难实现。当前网站不是使用bootstrap构建的，因此将两者合并在一起会带来一些预期的困难。

我在网站的页眉和页脚中有两个包含的文件，这些在网站的在线商店，引导方面有一些奇怪的显示问题，例如利润增加，半透明的下拉菜单和其他错误的彩色元素。在标头中禁用了bootstrap.css引用后，两个包含文件正确显示，因此我知道问题在于主要PHP文件本身的css和not语句定位。

到目前为止，我已经尝试过：

在引导引用下面引用我的css文件（它总是这样）

在我的css样式中使用！important来重叠元素

/ *在bootstrap css * /中的部分 - 这实际上有效，但随后搞砸了我需要引导的其他商店

我认为如果我找到问题的一个的解决方案，那么我可以复制其余部分的修复程序，这样我就会专注于我的页脚中的hr标记

我的css：

#footer_hr { width: 75%; color: #CCC; margin: 0px auto; }

我可以在hr＆＃39>上找到的引导部分：

hr { height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } -and- hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; }

hr应该和不应该是什么样的：

You can see here what im talking about visually

所以，有没有人知道我将如何覆盖这种引导风格，但除了我的页脚以外的其他所有东西都保留在那里？对此事的任何帮助都将非常感激：）

谢谢，

威尔

Answer 1

您能提供实际网站链接或至少是一个实例吗？

我会尝试一些事情：

1）

#footer_hr {
    border-top-color: #ccc; /* or better use "red" for trials */
}

2）

#footer_hr {
    border-color: #ccc; /* or better use "red" for trials */
}

Answer 2

好的，所以你遇到的最大问题是css总是适用于你的整个页面。一种方法确实是在bootstraps css中调整，但不建议这样做。

如果只有你的页脚和标题不应该包含bootstrap，你可以使用这个丑陋的黑客。 我非常确定这不是最好或最干净的解决方案，但它是一种快速的解决方法：

将页脚和标题放在iframe标记内。 http://www.w3schools.com/html/html_iframe.asp

这会将它们作为单独的页面加载到网页内，因此页脚/页眉中的css不会应用于主网页（具有引导程序）。

Answer 3

我设法通过过度设计受影响的点来解决这个问题，即使在没有必要的情况下也是如此。例如，使用Bootstrap hr：

hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}

我的#footer_hr成了：

#footer_hr {
    width: 75%;
    margin: 10px auto;
    border-top: 1px solid #666;
}

另外，为了防止其他人遇到这个Bootstrap问题，我有一个下拉式子ul菜单，它出现在一些Bootstrap元素后面 - 我设法用z-indexes解决了这个问题。

覆盖引导样式问题

3 个答案: