Ruby on Rails樣式與引導沖突

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，但這並不是我每次都想做的事情。 我在這種語法中做錯了什么？

編輯：

引導程序的包含是通過通過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工作表替換在vendor文件夾中，因為對我來說，這似乎是更明智的選擇。

Answer 1

您在使用link_to語法時沒有犯錯。
link_to僅呈現一個<a href></a>元素，它根本沒有樣式（除非您提供顯式style屬性）。
外觀由CSS完全定義。

因此，請使用瀏覽器的開發人員工具檢查鏈接上使用的CSS樣式，並在此處顯示結果以供參考。

也許Active Admin樣式將覆蓋引導樣式。

Answer 2

該application.css （或.sass或.scss對於無論你的文件擴展名是）作為原材，如果我沒有記錯的話，通常是最后加載任何進口的，你包括在application.css文件將為不同的控制器覆蓋任何樣式表（例如， post.css.scss將被application.css覆蓋）。

馬特·博爾特（Matt Boldt）的文章對此有很好的描述，並且對它的理解方式也很不錯。

編輯 ：

我想對此進行詳細說明，但是我被召集參加會議，所以既然結束了，我現在就開始做。

在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樣式。

這幾乎是我唯一需要的兩個原因。 老實說，使用對您最有效的方法，不會使以后的開發感到痛苦。