Question

我正在尝试为我的网络应用添加自定义样式。这是我的代码的链接：

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（在layout.erb中链接并且正在为整个项目中的.erb文件添加样式）正在运行。

我尝试过关于堆栈溢出的类似问题没有成功，也尝试了google如何为自举项目添加自定义样式 - 我所做的一切似乎都是正确的。

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

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

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

所以我猜我没有把它连接起来。

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）来识别您的样式是否适用，以及哪个类正在高估您的自定义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

您需要覆盖引导选择器。在完成的网站中使用此功能并不是一个好习惯，但是您可以使用!important来覆盖其他样式规则。

使用示例

.element-class{
    width:50%;
}

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

此处元素的宽度为100％。

详细了解何时在css-tricks article

上使用此功能

外部CSS文件与bootstrap

4 个答案: