css - CSS applied to all pages but one - Ruby/Sinatra
问题描述
I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:
- Clearing my browser cache
- Running the application on a new browser (Chrome, Safari, Firefox, even Edge)
- Running the application on a different device
- Linking the stylesheet directly from the erb file
This is my layout.erb file
<br/>
<h2>Upload a Video</h2>
<br/>
<br/>
<form action="/create_video" method="POST">
<div class="col-6">
<label for="videoTitle">Video Title</label>
<input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">
</div>
<br/>
<div class="col-6">
<label for="videoDescription">Video Description</label>
<input type="text" class="form-control" placeholder="Enter video description" name="description">
</div>
<br/>
<br/>
<div class="col-6">
<label for="videoURL">Video Link</label>
<input type="text" class="form-control" placeholder="Enter link to video" name="l_url">
</div>
<br/>
<div class="col-6">
<label for="listingUrl">Company</label>
<input type="text" class="form-control" placeholder="Enter company name" name="company">
</div>
<br/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<br/>
</div>
My layout.erb file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<%= erb :navigation %>
<main role="main">
<%= yield %>
</main>
<footer class="end">
<div class="footer-grid">
<div class="footer-one">
<p> logo<p>
</div>
<div class="footer-two">
<p>© Copyright Ignite 2018. All rights reserved.</p>
<p>Terms of use • Press Inquiries • General Inquiries • Investors</p>
</div>
<div class="footer-three">
<img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>
<img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>
<img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Finally, this is a small snippet where the style sheet IS working:
<br/>
<br/>
<h2>Videos</h2>
<br/>
<br/>
<% @videos.each do |v| %>
<img src="<%= v.logo %>" width="110" height="110">
<h3><%= v.title %></h3>
<p><%= v.l_url %></p>
<p><%= v.description %> </p>
<br/>
<% end %>
<br/>
<br/>
<br/>
<br/>
</div>
Any idea what might be wrong? I appreciate any tips.
解决方案
我认为这可能会解决您的问题,我认为您的样式表的链接可能已损坏。如果页面不在顶部路径中,如果它看起来像这样:
在您的layout.erb
-file 中,您使用以下方式引用样式表:
href="style.css"
在您的 CSS-imports 中,我建议您使用例如参考样式表:
href="/style.css"
注意文件名前的斜杠。斜杠告诉浏览器该资源将从您的网络服务器的根路径加载。如果没有斜线,浏览器将尝试style.css
从下面的路径中获取:
推荐阅读
- java - Android studio Firebase 数据库查询选定值
- angular - 基于位置的 Angular 2 组件模板上的自定义 CSS 类
- regex - 使用正则表达式的最佳方式
- python-3.x - 当我使用变量参数初始化 dag 时,它会引发异常
- php - Woocommerce 中的自定义类别页面标题
- javascript - 如何按时间倒序从 DynamoDB 获取项目?
- python-3.x - WebElement.text 的访问时间增加
- tensorflow - 构建张量流图时如何定义需要输入numpy数组(不是张量)的损失函数?
- python - 如何在不使用额外内存的情况下将 Pandas 数据帧转换为 Numpy 数组
- node.js - 使用模板的请求技能的响应存在问题,Alexa 技能使用模板指令