Question

我正在努力抓住铁轨。

我正在试图弄清楚为什么我的CSS不适用于link_to位内容。

我有一个表单，用户可以在其中撰写帖子。然后，我在显示页面上显示这些帖子，并在其中一个关键页面上显示它们。该摘录存储在名为_extract.html.erb的文章文件夹中的部分内容中。

它具有以下内容：

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <% Article.all.in_groups_of(2) do |group| %>
      <div class="row">
        <% group.compact.each do |article| %>
            <div class="col-md-5 col-md-offset-1">
              <div class="indexdisplay">
              <%= image_tag article.image_url, width: '100%', height: '200px' if article.image.present? %>
                  <a class="extracttitle"><%= link_to article.title, article %> </a>
                <div class="intpol3">    <%= truncate(article.body, :ommission => "...", :length => 250) %></div>
                 </div>
            </div>
              <% end %>
              </div>

    <% end %>

  </div>
</div>

在关键页面上，我将该部分包含在：＆lt;％= render'articles / extract'％＆gt;

文章页面本身的样式工作正常，有：

<div class="intpol3" style="text-align: left; font-size: 17px; padding-top:10px; color: #003366">
                    <%= @article.title %>
                </div>

当我创建div class = extracttitle

时，该部分也可以正常工作

Extracttitle是一个CSS类，定义为：

.extracttitle {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  padding-bottom: 5px;
  color: #003366;
  margin-top: 5px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align:left; 
  padding-left:1px;
  a:link {text-decoration:none; background-color:transparent; color: #003366;};
  a:visited {text-decoration:none;background-color:transparent; color:#003366;};
  a:hover {text-decoration:none;background-color:transparent; color:#E50851;};
  a:active {text-decoration:none;background-color:transparent; color:#003366;};
}`

当我渲染这个页面时，内容会显示所有的CSS，除了标题被标准设置中的某些东西覆盖，这个东西在链接上应用了丑陋的样式。

我无法弄清楚如何覆盖它。

我尝试过div标签，我尝试将html_options放在link标签内。没有什么工作。

如何将CSS放在rails标记链接的内容上？我觉得这应该有一个简单的解决方案。我尝试了20多种变体，但找不到解决方案。

我的CSS文件设置如下：

application.css.scss

 *= require_tree .
 *= require_self
 */

framework_and_overrides.css.scss

@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

custom.css.scss

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

我有一个名为articles.css.scss的文件，这是存储这些文件的地方。也许下面的评论中有关于订单内容的内容。如果按字母顺序加载文件，则自定义c将在文章之后。

Answer 1

默认情况下，默认情况下隐藏了引导程序的css文件，假设您使用的是gem。这可能是需要关注的内容

我建议您查看Railscast for bootstrap，因为它显示了它，但https://github.com/seyhunak/twitter-bootstrap-rails处的文档也指出了强制css文件的以下命令

rails g bootstrap:themed [RESOURCE_NAME]

希望能让你朝着正确的方向前进

Answer 2

让我们测试一下，看看会发生什么：

重构您的DOM：

<a class="extracttitle"><%= link_to article.title, article %> </a>

为：

<%= link_to article.title, article, class: "extracttitle" %>

刷新并查看正在进行的操作，如果不能正常工作，请按照步骤2进行操作

确保在bootstrap之后包含你的css，检查你的application.scss文件，应该是这样的

application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "framework_and_overrides"
@import "custom" /* don't import bootstrap inside this file. */

将!important添加到您的css文件

添加此行

color: red !important;

在.extracttitle{}内，看看文字是否变为红色

Rails - Bootstrap - 样式link_to内容

2 个答案: