使用CSS / BootStrap

Question

我目前正在尝试渲染新闻源，类似于我正在处理的Rails应用程序上的FB。不幸的是，我在CSS方面并不是最好的，而且我在试图显示不同的帖子时遇到了一些问题。无论我使用的是BootStrap还是普通的CSS，都会出现此问题。我确实认为它与<% @posts.each do |post| %>创建的循环有关。目前，无论何时制作新帖子，它都包含在上一篇文章中;因此制作的帖子越多，边界越厚。

图片：

<% if @posts.any? %>
<% @posts.each do |post| %>
<div class="well">
  <a href="/users/<%= post.user.id %>/show"><%= post.user.first_name %> <%= post.user.last_name %></a><br>
  <% if !post.image.exists? %>
    <h2> <%= post.text %> </h2>
  <% else %>
    <h2> <%= link_to post.text, post_path(post) %> </h2>
    <%= link_to post_path(post) do %>
      <p><%= image_tag post.image.url(:medium) %></p>
    <% end %>
  <% end %>
<% if @user %>
    <% if current_user.voted_up_on?(post) %>
      <%= link_to "Like", dislike_post_path(post), method: :put %>
    <% else %>
      <%= link_to "Like", like_post_path(post), method: :put %>
    <% end %>
<% end %>
<%= "Likes: #{post.get_upvotes.size}" %>
<% if post.user == current_user %>
<%= link_to "Edit", edit_post_path(post) %>
<%= link_to "Delete", post_path(post), method: :delete %>
<% end %>
<div id='comments_div' class="comments-index">
  <%= render post.comments %>
</div>
<% if current_user %>
  <%= form_for [post, post.comments.new ], remote: true do |f| %>
   <%= f.text_area :text, placeholder: 'Add a comment' %>
   <%= f.submit 'Comment' %>
  <% end %>
<% else%>
  <p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
<% else %>
No posts have been added!
<% end %>
</div>

任何帮助将不胜感激！谢谢。

编辑：好的，请看一下新图片 - 希望这会让问题稍微明显一点。此外，我删除了所有死标签，只用一个替换它们：BootStrap＆＃39;＆＃39;＆＃39;类。所以你有它。您需要的所有信息都在上面的代码中。

Answer 1

从你的描述中听起来好像html元素没有被正确关闭。通过html验证程序运行页面源代码，可以显示问题。

如果您不想采用结构化问题解决方法，请尝试在posts-index容器的末尾添加另一个</div>。

Answer 2

你的问题很简单，只是由于不良的压制而不清楚。

解释你所做的一个简单的方法是：

<-- if (start) -->
  <-- do (start) -->
    <-- post (start) -->

    (post is not ending here, hence it breaks the layout)
  <-- do (end) -->
<-- if (end) -->
<-- post (end) -->

上面的错误应该很容易理解，所以如果你在最后一个</div>（<% end %>之前）移动你的最后<% @posts.each do |post| %> loop（井级）它应该解决问题。所以最后几行应该是

  <% else%>
    <p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
  <% end %>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>

Answer 3

对我来说听起来可能是错位的

<% end %>

或遗失

</div>

导致此行为。 正确的缩进将指向关闭动作或div的位置