【问题标题】:issues with merging CSS stylesheets? [closed]合并 CSS 样式表的问题? [关闭]
【发布时间】:2018-10-03 15:24:18
【问题描述】:

基本上,我想在托管在 Bootstrap template 上的项目中使用 CodyHouse 的 vertical timeline。我已经迁移了 HTML 内容,但是 CSS 文件导致了问题。例如:

  • 它会扭曲导航栏和标题间距
  • 应该有时间线元素的反弹动画 - 不行。
  • 我看不到时间线的任何 p 文本

如何适当地编辑/排列样式表,以便时间线继承 Bootstrap 的字体/背景样式但保持 CodyHouse 的动画?

【问题讨论】:

  • 更改时间线的类,使其独一无二,然后您可以将 codyhouse 中的类更改为匹配,这样您就不会受到现有类的干扰。确保当你完成类更改时,你不是针对元素 - 例如,没有任何东西针对 p

标签: css twitter-bootstrap bootstrap-4


【解决方案1】:

查看 styles.css 中的规则 ...您可能希望删除通用规则 - 所有在“主要样式”下的规则,然后是“资源样式”下的前几个规则,其中引用了标题中的内容{...}。

也不包括其他样式表,reset.css 和 demo.css

【讨论】:

  • 只是好奇,为什么不应该包含其他样式表?
  • 好吧,reset.css 是 codyhouse 自己的重置样式表版本,其中 bootstrap 已经拥有它自己的,您可能会覆盖一些值。 demo.css 似乎特定于他们自己的演示页面,与实际的时间线 html 无关。他们还没有真正将其正确打包为“插件”。
【解决方案2】:

在您没有提供代码供检查的情况下,很难真正确定您的问题是什么,但是....

您确实需要在页面上使用浏览器的检查/页面调试功能来查看引导样式表和垂直时间线的样式表是如何对您的页面进行处理的。

Bootstrap 有自己的默认配色方案,您只需查找相应的 bootstrap 元素,然后在自定义样式表中覆盖它们即可轻松更改它

如果您要链接到三个不同的样式表(引导、时间线和您的自定义样式表),显然那里可能会发生冲突。假设在 boostrap 上,它对导航栏和顶部间距做一件事,而您的自定义 CSS 做另一件事并影响底部空间 - 明白我的意思吗?你真的应该检查那些 css 文件,看看它们到底影响了什么。

另外,你使用的垂直时间线插件是基于 bootstrap 4 的吗?如果它是围绕引导程序 3 构建的,那也可能是另一个问题。 BS4 仍然相对较新,许多基于 BS3 的插件可能需要进一步修改。

【讨论】:

  • 谢谢 - 我正在检查,但不确定是否有更快的方法来完成检查。它也没有真正打包为插件,所以我认为它根本不适合与引导程序一起使用。这主要是我想要带回的动画,以及我能及时弄清楚/处理的所有其他内容。
猜你喜欢
  • 1970-01-01
  • 2014-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-26
  • 1970-01-01
  • 2011-11-14
  • 1970-01-01
相关资源
最近更新 更多