外部 CSS 文件无法与 bootstrap 一起使用

Question

我正在尝试向我的网络应用程序添加自定义样式。这是我的代码的 link：

https://github.com/SammyAbukmeil/rps-challenge

在 layout.erb 我有以下内容：

<head>
  ...
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/custom.css">
  ...
</head>

应该加载我的 custom.css 文件。

在views/index.erb我有一个测试ID：

<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">

在 css/custom.css 中，我正在调用该 ID：

#test {
  margin-top: 50px;
}

但由于某些原因，它没有应用我的自定义样式，尽管 bootstrap（正在 linked layout.erb 中添加样式到 .erb 文件）正在运行。

我已经尝试查看有关堆栈溢出的类似问题但没有成功，还尝试了 google 如何将自定义样式添加到 bootstrap 项目 - 我所做的一切似乎都是正确的.

非常感谢任何建议。谢谢！

编辑：所以我检查了控制台，发现了这个：

...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...

所以我想我 link 没弄对。

Answer 1

Bootstrap 选择器非常具体，例如 body > div > img.img-responsive。您需要更具体才能覆盖选择器。您可以暂时使用 !important 声明来测试它：

#test {
  margin-top: 50px !important;
}

如果它覆盖了，你有一个工作设置，只需要更具体的选择器。之后，您应该删除 !important 声明并向选择器添加详细信息：

body > div > img#test {
  margin-top: 50px !important;
}

Answer 2

首先你需要了解CSS的层次结构您可以使用 Firebug (Firefox) 来确定您的样式是否适用以及 class 高估了您的自定义 css.

注意：还要避免为 CSS 样式添加 ID

Answer 3

在 Sinatra 中，任何静态文件（例如 CSS 文件）都应该位于 public_folder 设置指向的文件夹中。通常这被命名为 public。在您的 server.rb 中，您将其设置为 public 但相对于项目根目录。

您需要在项目的顶层创建一个 public 文件夹（在 app、view 等旁边），将您的 css 目录移动到然后更改 server.rb 中的设置，使 :public_folder 指向它，类似于您对 :views 设置所做的操作：

set :public_folder, proc { File.join(root, "..", "public") }

Answer 4

您需要覆盖 bootstrap 选择器。在您完成的网站中使用它不是好的做法，但是您可以使用 !important 来覆盖其他样式规则。

使用示例

.element-class{
    width:50%;
}

.element-class{
    width:100% !important;
}

此处元素的宽度为 100%。

在 css-tricks article

上阅读更多关于何时使用它的信息

外部 CSS 文件无法与 bootstrap 一起使用

External CSS file not working alongside bootstrap

css

sinatra

twitter-bootstrap