首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Rails + Bootstrap主题: Bootstrap覆盖我的CSS / Google字体

Rails + Bootstrap主题: Bootstrap覆盖我的CSS / Google字体
EN

Stack Overflow用户
提问于 2017-06-10 01:20:58
回答 0查看 203关注 0票数 1

我目前正在尝试将Bootstrap主题集成到我的rails项目中。我已经安装了Bootstrap-Sass Gem &我正在尝试使用Google字体,使用他们在标题中提供的链接标签。目前看来,Bootstrap似乎正在覆盖Google字体(&可能是其他CSS),我不确定如何解决这个问题。我意识到已经有几个类似的问题被问到了,但到目前为止,我尝试过的解决方案似乎还没有奏效。

我确信Bootstrap是正确安装的,因为其他bootstrap样式可以正常工作。

我尝试过在我的application.css文件中移动东西,但是没有成功。

我尝试在我的CSS文件中添加一个@import链接,而不是在head标签中使用链接。

我知道我可以将!important添加到css属性中(这是可行的,但我不希望使用route...unless,这是需要它的异常之一吗?)。

我的application.rbconfig.assets.paths << Rails.root.join("app", "assets", "fonts")

我已经使用Google字体很多次了,没有任何问题。我就是想不出我错过了什么。我是不是没有正确组织我的CSS清单文件?我读到过,你在清单中需要资产的顺序很重要,但我并不是在每种情况下都很清楚。在我的例子中,template.css是我试图开始工作的主要css文件。它应该放在引导程序@imports下面吗?如果是,如何放在下面(当我尝试这种奇怪的事情发生时)?

Application.css.scss

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
 *= require bootstrap.min
 *= require themify-icons
 *= require magnific-popup
 *= require vertical.min
 *= require template
 *= require jquery-ui
 *= require font-awesome
*/

@import "bootstrap-sprockets";
@import "bootstrap";

我的application.html.erb文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Favicons-->
    <%= favicon_link_tag 'favicon.png' %>
    <%= favicon_link_tag 'apple-touch-icon.png' %>
    <%= favicon_link_tag 'apple-touch-icon-72x72.png' %>
    <%= favicon_link_tag 'apple-touch-icon-114x114.png' %>
    <!-- Web Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Suranna" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
  </head>

  <body>

    <%= yield %>

  </body>
</html>
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44468617

复制
相关文章
bootstrap 字体颜色
<div class="container"> <em>em</em> <b>b</b> <strong>strong</strong> <p class="muted">class="muted"</p> <p class="text-warning">text-warning</p> <p class="text-error">text-error</p> <p class="text-info">text-info</p> <p class="text-success">text-success</p> </div>
用户5760343
2019/07/07
2.7K0
bootstrap 字体图标
图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
用户5760343
2022/01/10
1.3K0
bootstrap 字体图标
Rails 7 中引入 Bootstrap 5
在 Rails 7 中静态资源的管理已经从 “Webpacker” 改为了 “Import Maps”,用来简化基于 JavaScript 的工具和包管理器 Webpack、Yarn 或者 npm 的使用。
RiemannHypothesis
2023/03/16
2.6K0
Rails 7 中引入 Bootstrap 5
Rails 7 中引入 Bootstrap 5
在 Rails 6 中有两种不同的工具可以用来管理前端的 CSS、JavaScript 以及 images 等资源,分别是 “Sprockets” 和 “Webpacker”,“Sprockets” 除了 Rails 应用外很少使用,但是 “Webpacker” 不仅在 Rails 中,在其他应用框架中也被广泛的使用。
RiemannHypothesis
2023/02/20
3.1K0
Rails 7 中引入 Bootstrap 5
Bootstrap在css规则下,如何获取Glyphicons字体图标
我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:
好派笔记
2021/09/18
1.8K0
bootstrap 字体 颜色 text-xxx
small 副标题 strong 加黑 em 斜体 p class='text-left' 左对齐 text-center 中对齐 text-right 右对齐 字体颜色减轻 text-muted text-primary 颜色 text-success text-info 颜色 text-waring 颜色 text-danger 颜色
用户5760343
2022/01/10
1.1K0
bootstrap 字体 颜色 text-xxx
CSS 全解析实战(八)-Bootstrap1 Bootstrap介绍2 Bootstrap基本用法3 Bootstrap JS组件
1 Bootstrap介绍 Bootstrap 下载 2 Bootstrap基本用法 引入boostrap.css 网格划分 左空
JavaEdge
2018/08/02
1.1K0
CSS 全解析实战(八)-Bootstrap1 Bootstrap介绍2 Bootstrap基本用法3 Bootstrap JS组件
新主题基于Bootstrap3
大家应该注意到了,老高花了两天时间匆忙做的难看的主题终于上线了。 已经实现的: 自适应页面 lazyload图片加载 加载速度优化 目前BS的浏览器支持情况如下表 Chrome Firefox Internet Explorer Opera Safari Android 支持 支持 N/A 不支持 N/A iOS 支持 N/A 不支持 支持 Mac OS X 支持 支持 支持 支持 Windows 支持 支持 支持 支持 不支持 如果遇到某些BUG,请在此页反应!
老高的技术博客
2022/12/28
1630
新主题基于Bootstrap3
bootstrap分页css样式,修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$(“”)选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧。
全栈程序员站长
2022/09/09
6.7K0
bootstrap3 css样式
<p class="lead"> Packtís mission is to help the world put software to work in new ways </p>
用户5760343
2019/10/14
5760
bootstrap3 css样式
Bootstrap4如何动态切换主题
bootstrap4有个网站叫做bootswatch(文末给出链接),其中已经设计了一些很美的主题:
benny
2019/03/07
2.8K0
Bootstrap4如何动态切换主题
bootstrap bootstrap-dropdown.js
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
用户5760343
2019/07/07
4K0
bootstrap使用教程_bootstrap 教程
我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。
全栈程序员站长
2022/11/07
16.9K1
BootStrap
iconfont的使用:https://www.cnblogs.com/changxin7/p/11479216.html
changxin7
2022/05/06
5.5K0
BootStrap
flask 免费bootstrap主题下载(flask 51)
https://bootswatch.com/ 下载完替换掉bootstrap.min.css就行
用户5760343
2019/08/15
7870
bootstrap导航栏(bootstrap页面)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/126954.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/01
3.7K0
【BootStrap】<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明
这个网址号称是国内最先翻译BootStrap4的中文文档。 该网址是:http://wiki.jikexueyuan.com/project/bootstrap4/getting-started/introduction/ 然而,我想说的是,这源码其实都是BootStrap3的。 英文的BootStrap4的模板是下面这个: 英文网址:https://v4-alpha.getbootstrap.com/getting-started/introduction/
谙忆
2021/01/21
6910
【BootStrap】<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明
Bootstrap
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap支持响应式布局!响应式布局指的是一个网站能够兼容多种终端设备访问!. 终端设备:..电脑、平板电脑、手机
eadela
2019/09/29
6.6K0
Bootstrap
BootStrap
为了增强跨浏览器渲染的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库
HammerZe
2022/03/25
3.3K0
BootStrap
bootstrap
花了一天时间学了下bootstrap入门,想必大家用css写前端页面的时候都很痛苦,bootstrap就是来解决这个问题的,它封装了css的很多样式,开发的时候直接拿来用就可以了,提高了开发效率
用户3112896
2019/09/26
3.4K0
bootstrap

相似问题

Bootstrap覆盖Google字体

42

覆盖Rails SASS Bootstrap CSS

24

CSS - Google字体(蒙特塞拉特)不覆盖Bootstrap标准字体

24

bootstrap覆盖rails中的只读css

11

CSS Bootstrap覆盖我自己的CSS

100
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文