Question

我的假设是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表，因为在我看来这是更明智的选择。

Answer 1

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

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

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

Answer 2

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样式。

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

Ruby on Rails样式与bootstrap冲突

2 个答案: