我的假设是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表,因为在我看来这是更明智的选择。
答案 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。即使我被告知这是不好的做法,它每次都对我有用,从来没有真正给我任何复杂性,实际上提高了我的生产力有几个原因:
!important
强制覆盖Bootstrap样式。这几乎是我需要的两个原因。老实说,使用任何最适合你的方法,不会让它在未来的发展变得痛苦。