Hartl Rails教程列表11.25 - 微博的CSS不会更新

Question

使用Rails教程，我在listing 11.25遇到了问题。根据列表更新CSS后，我本地托管的开发环境应用程序的显示（对于已登录，已激活的用户）的种子用户＆＃39;微博 - 缩进仍然是错误的等等。也就是说，/users/1仍然看起来像this (screenshot)。我需要做什么才能申请CSS？

到目前为止，我没有遇到任何问题。所有测试都通过绿色。我只使用本教程建议的宝石。我执行了以下故障排除步骤：

1. 我已多次重启WEBrick服务器
2. 关闭并打开浏览器。 （在Chrome for Linux上，47.0.2526.111（64位））
3. 尝试了另一个浏览器（最新的Firefox）
4. 清除Chrome的缓存
5. 重新启动了我的电脑

/app/views/users/show.html.erb ：

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
  <div class="col-md-8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

/app/views/microposts/_micropost.html.erb ：

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content"><%= micropost.content %></span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
</li>

app/assets/stylesheets/custom.css.scss ：

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

app/models/micropost.rb ：

class Micropost < ActiveRecord::Base
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
end

app/controllers/users_controller.rb ：

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @microposts = @user.microposts.paginate(page: params[:page])
  end
end

Answer 1

我也有这个问题。问题在于您的代码：

应用程序/视图/微柱/ _micropost.html.erb

<%= link_to gravatar_for(micropost.user), micropost.user %>

CSS的设置就像你完成了第7章中的练习1.要么完成这个额外的练习，要么增加你的CSS文件中的微博填充。我不记得确切地增加哪个填充但是首先尝试这些：

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }

另请注意：这是调试CSS问题的简便方法。使用Chrome作为浏览器，转到浏览器右上角的汉堡菜单，然后选择＆＃34;更多工具＆＃34; ＆GT; ＆＃34;开发人员工具＆＃34;。然后单击开发人员工具左上角的按钮：

现在您可以使用鼠标选择页面的任何部分。找到导致问题的页面部分，然后单击它。现在位于＆＃34;样式＆＃34;下的开发人员工具栏的右侧。您可以找到应用于所选元素的所有CSS。您甚至可以在开发人员工具中更改这些值，并在屏幕上看到它实时更新。因此，在您的情况下，请使用填充物，直到您拥有正确的高度。然后你可以回到你的代码并在那里进行更改，重新加载你的页面，它应该工作。