Ruby on Rails样式与bootstrap冲突

时间:2015-08-05 14:36:38

标签: css ruby-on-rails ruby twitter-bootstrap haml

我的假设是haml在rails和bootstrap上使用ruby的简单语法问题。

目前,每当我想在引导元素(如按钮或导航栏li)中使用link_to时,link_to的样式将覆盖元素本身使用的样式。它会导致蓝色下划线链接,这与某些布局严重冲突。

类似的事情:

%ul.nav.navbar-nav
 %li
  = link_to t(:button_root), '/'
 %li
  = link_to t(:button_something), something_path

.row
  = link_to something_path, class: 'btn btn-default' do
   = t(:button_something)

会产生这种行为。我提出了一些不切实际的解决方案,比如直接在application.css中覆盖css,但这并不是我每次都要做的事情。我在这种语法中做错了什么?

编辑:

包含bootstrap是通过application.css.scss

导入完成的
@import "bootstrap-sprockets";
@import "bootstrap";

除了Active Admin的

之外,其余的样式表都是空的
@import "active_admin/mixins";
@import "active_admin/base";

编辑:

在应用程序样式表中包含活动管理员的css是问题的原因。通过更清楚地了解问题的原因,我可以找到解释问题的答案。

https://stackoverflow.com/a/11745446/5194491

我选择取消供应商文件夹中的有效管理员css表,因为在我看来这是更明智的选择。

2 个答案:

答案 0 :(得分:0)

link_to语法没有错 link_to仅呈现<a href></a>元素,它根本没有样式(除非您提供明确的style属性)。
外观完全由CSS定义。

因此,请使用浏览器的开发人员工具检查链接上使用的CSS样式,并在此处显示结果以供建议。

也许Active Admin样式会覆盖引导样式。

答案 1 :(得分:0)

application.css(或.sass.scss,无论您的文件扩展名是什么)都用作主工作表,如果我没有记错,通常会加载 last 并且application.css文件中包含的任何导入都将覆盖不同控制器的任何样式表(例如post.css.scss将被application.css覆盖,例如)。

Matt Boldt's article对此有很好的描述以及如何理解它。

修改

我想详细说明这一点,但我被召集开会,所以我现在就这样做了,因为它结束了。

application.css文件中,您应该看到需求行列表的最底部:

...
*= require_tree .        //The "tree" of all other stylesheets gets compiled first.
*= require_self          //Then this page (the application.css page) gets loaded after the tree
*/
@import stuff...         //Then this overrides all that stuff 

我不确定是否可能切换require_tree .require_self行可以解决这个问题,但它并不像其他人一样感觉而且我通常不习惯修改Rails应用程序中的某些层次结构,所以虽然这可能有用,但我个人并不建议。

我通常在application.css中写我的CSS。即使我被告知这是不好的做法,它每次都对我有用,从来没有真正给我任何复杂性,实际上提高了我的生产力有几个原因:

  • 我的所有CSS都在一个文件中,而不是分散在几个文件中,这可能会导致样式不一致。
  • 我不需要在任何地方使用!important强制覆盖Bootstrap样式。

这几乎是我需要的两个原因。老实说,使用任何最适合你的方法,不会让它在未来的发展变得痛苦。