Hartl Rails教程清單11.25-用於微博的CSS不會更新

Question

在使用Rails教程時，我在清單11.25中遇到了問題。 在按照清單更新CSS后，種子用戶的微博在本地托管的開發環境應用程序的顯示中（對於已登錄的激活用戶）沒有任何變化-縮進仍然是錯誤的，依此類推。也就是說， /users/1仍然看起來像這樣（截圖） 。 我需要做什么才能使CSS生效？

到目前為止，我還沒有任何問題。 所有測試均通過綠色測試。 我僅使用本教程建議的寶石。 我已執行以下故障排除步驟：

1. 我已經多次重啟了WEBrick服務器
2. 關閉並打開我的瀏覽器。 （在Linux版Chrome上為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

我也有這個問題。 問題出在您的代碼中：

app / views / microposts / _micropost.html.erb

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

就像完成第7章中的練習1一樣，對CSS進行設置。要么完成此附加練習，要么增加CSS文件中用於微博的填充。 我不記得要增加哪種填充，但是先嘗試一下：

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

另請注意：這是調試CSS問題的簡便方法。 使用Chrome作為瀏覽器，轉到瀏覽器右上角的漢堡菜單，然后選擇“更多工具”>“開發人員工具”。 然后單擊開發人員工具左上角的按鈕：

現在，您可以使用鼠標選擇頁面的任何部分。 找到導致您的問題的頁面部分，然后單擊它。 現在，在開發人員工具欄的“樣式”下，您可以找到應用於所選元素的所有CSS。 您甚至可以直接在開發人員工具中更改值，並在屏幕上實時查看它的更新。 因此，在您的情況下，請練習填充物直到您擁有合適的高度。 然后，您可以返回您的代碼並在那里進行更改，重新加載頁面，它應該可以工作。