css - 编辑 Bootstrap css 类

标签 css ruby-on-rails twitter-bootstrap

之前有一些关于这个主题的问题,但我有点迷茫,我希望有人能以不同的方式向我解释这个问题。

上下文:我在我的 Rails 应用程序中使用 twitter bootstrap(没有 Less,不熟悉 Less 或它是什么,但这是一个单独的问题)

我一直在自学 CSS,在我的 Rails 应用程序中查看 application.html.erb 文件时,它会调用某些类,例如“nav-bar”和“container-fluid nav-collapse”。我试图找到定义这些类的 css 文件(以便我可以自定义它们)但我找不到它。到目前为止,我已经尝试了 bootstrap_and_overrides.css 和 application.css.scss 文件,但找不到导航栏类。我也试过这些链接:Bootstrap CSS Editing Editing navbar text color in twitter bootstrap但我没有任何运气。

最佳答案

你不应该直接编辑 bootstrap css 文件。

对于您提到的任何需要更新的内容,请使用 bootstrap_and_overrides.css 或您的 custom.css 文件来覆盖原始类和 div。

查找类在 css 文件中位置的最佳方法是如果您使用的是 firefox,请单击:

Inspect Element,在右侧您将看到保存此类的 .css 文件的名称。 enter image description here

enter image description here

但是当你有类名时,你可以用你的规则覆盖这个类。不过不要忘记包含您的 custom.css 文件。

如果您仍然无法找到特定类的隐藏位置,您可以使用 firebug 来跟踪加载了哪些文件,如下所示: enter image description here

对于每个文件,您都有源代码,您可以在其中查看路径并找到元素。

关于css - 编辑 Bootstrap css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20896018/

相关文章:

android - 使用 FCM 从 Rails api 向 Android 推送通知未发送通知?

ruby-on-rails - 为什么在某些情况下 Rails 应用返回 406 而不是 404?

html - Twitter Bootstrap 容器最大宽度折叠跨度

html - 关于 Bootstrap 中可折叠导航栏的问题

html - CSS/HTML - Div 与否? (最佳实践)

css - 将 3 个 CSS 选择器合二为一

html - 获取一个文本框以填充其容器 div 宽度的 100%

ruby-on-rails - Rails 参数错误 "Unknown Key"?

Html.DropDownListFor() 验证有效但字段​​未变为红色

CSS Hover 不是 Nav 的全高或全宽