Laravel覆盖bootstrap模板

Question

所以我在我的项目中获得了自定义app.css，并且我使用了bootstrap模板。现在，当我在app.css中创建新的按钮样式时，它可以在任何地方访问（在每个页面上，因为我有主模板，其他页面正在扩展它）但是当我在app.css中覆盖bootstrap主题时它会被访问。不工作当我使用相同的代码使用<style>标签覆盖页面顶部的引导程序时，它正在运行。 app.css包含正确，并在bootstrap.css之后，所以任何想法我做错了什么？

Answer 1

尝试使用Chrome进行缓存刷新，我使用Ctrl + Shift + R。

如果这不会产生任何结果，请使用Chrome或Firefox上的内置检查器查看您正在编辑的元素的附加属性。如果app.css覆盖了bootstrap.css，你会看到类似下图的内容，显示app.css位于skin-purple.min.css之上，这意味着app.css是最新加载的。

Answer 2

我会说有一个层次结构，尝试在app.css之后包含bootstrap.css，你也可以像这样给那些css属性!important：

#bla {
    display:none !important
}

但是我认为这不是一个好习惯，如果你不覆盖很多bootstrap.css就可以了。

你也可以试试这个：

http://bootstrap-live-customizer.com/

自定义引导程序。

Answer 3

很可能是样式优先问题。我发现this article非常有用，至少可以了解样式优先级和特异性的含义。

在您的情况下，简单地使用类选择器（如

）可能会有所帮助

.mybutton button{
    color: blue;
    font-size: inherit;
    ...
}

并为您的按钮指定属性class="mybutton"。在类定义中，您可以自由地覆盖您想要的任何内容，并且还可以从Bootstrap继承其他属性。

还有!important规则。但是，它通常被称为一种不好的做法，因为它打破了正常的级联规则，使调试变得非常痛苦。