![](/img/trans.png)
[英]Spacing/CSS Issue? - The Ruby on Rails Tutorial by Michael Hartl
[英]Hartl Rails Tutorial listing 11.25 — CSS for microposts does not update
在使用Rails教程时,我在清单11.25中遇到了问题。 在按照清单更新CSS后,种子用户的微博在本地托管的开发环境应用程序的显示中(对于已登录的激活用户)没有任何变化-缩进仍然是错误的,依此类推。也就是说, /users/1
仍然看起来像这样(截图) 。 我需要做什么才能使CSS生效?
到目前为止,我还没有任何问题。 所有测试均通过绿色测试。 我仅使用本教程建议的宝石。 我已执行以下故障排除步骤:
/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
我也有这个问题。 问题出在您的代码中:
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。 您甚至可以直接在开发人员工具中更改值,并在屏幕上实时查看它的更新。 因此,在您的情况下,请练习填充物直到您拥有合适的高度。 然后,您可以返回您的代码并在那里进行更改,重新加载页面,它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.