Rails - Bootstrap - 样式链接到内容

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>

然后我在关键页面上包含该部分内容：

文章页面本身的样式运行良好，其中：

<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 放在链接标签中。什么都没有。

如何将 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

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

1. 从以下方面重构 DOM：

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

到：

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

刷新并查看发生了什么，如果不工作请按照步骤 2

1. 确保在引导后包含您的 css，检查您的 application.scss 文件，应该类似于

application.css.scss

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

1. 将 !important 添加到您的 css 文件中

添加这一行

color: red !important;

在您的.extracttitle{} 中查看文本是否变为红色