Ruby Rails 样式与 bootstrap 冲突

Question

我认为在 rails 和 bootstrap.

上使用 ruby 的 haml 中存在一个简单的语法问题

目前，每当我想在 bootstrap 元素（例如按钮或导航栏 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 的

之外，其余样式sheet 都是空的

@import "active_admin/mixins";
@import "active_admin/base";

编辑：

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

我选择在供应商文件夹中替换活动管理员的 css sheet，因为在我看来这是更明智的选择。

Answer 1

您的 link_to 语法没有任何问题。
link_to 只渲染一个 <a href></a> 元素，它根本不做样式（除非你提供一个明确的 style 属性）。
外观完全由您的 CSS.

定义

因此，请使用您浏览器的开发人员工具来检查您 link 上使用的 CSS 样式，并在此处显示结果以供参考。

可能 Active Admin 样式覆盖了 bootstrap 样式。

Answer 2

application.css（或 .sass 或 .scss 无论您的文件扩展名是什么）用作主 sheet，如果我没记错的话，是通常加载 last 并且您在 application.css 文件中包含的任何导入都将覆盖不同控制器的任何样式 sheet（例如 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 应用程序中的某些层次结构，因此尽管这可能有效，但我个人并不建议这样做。

我通常把我的CSS写在application.css里。尽管有人告诉我这是不好的做法，但它每次都对我有用，而且从来没有给我带来任何麻烦，而且实际上提高了我的工作效率，原因如下：

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

这几乎是我需要的仅有的两个原因。老实说，使用最适合你的东西，不会让未来的开发变得痛苦。

Ruby Rails 样式与 bootstrap 冲突

Ruby on Rails styling conflict with bootstrap

css

ruby-on-rails

ruby

twitter-bootstrap

haml