退出 Rails 时 CSS 更改答案

【问题标题】：CSS changes when logging out Rails退出 Rails 时 CSS 更改
【发布时间】：2015-10-11 20:56:19
【问题描述】：

我正在制作一个简单的图片库，我突然注意到一个我无法弄清楚的奇怪错误。

当用户登录时，页面看起来应该是这样的，但是一旦用户注销，特定于图像的 CSS 就会被破坏。

我正在使用带有 Twitter Bootstrap gem 的 Rails 4

ERB/HTML

    <div class="container">
  <div class="row">
   <% @projects.each do |project| %>
    <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 prosjekt_ramme">
      <div class="prosjekt">
        <p class="prosjekt_content">
          <%= project.content %>
           <% if user_signed_in? %>
            <%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %> </p>                               
           <% end %>
          <%= image_tag(project.picture.url, class: "img-responsive project_image") %>
      </div>
      <hr>
    </div>
   <% end %>
  </div>
</div>

CSS

.prosjekt {
 background-color: #eee;
 padding: 0;
 text-align: center;
 margin-bottom: 5%;
 height: 350px;

 img {
  max-width: 100%;
  max-height: 80%;
  display: block;
  margin: auto;
  }
}

如果我删除

<% if user_signed_in? %>
          <%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %></p>                               
<% end %>

无论我是否登录，特定于图像的 CSS 都会被破坏。知道发生了什么吗？

【问题讨论】：

它可能与结尾的 p 结束标签有关：</p>。由于结束标记位于 if 语句中，因此它仅在该条件下关闭。尝试在<% end %>之后移动它
哇，你完全正确！非常感谢，有时让其他人查看您的代码会有所帮助！ :-)
太棒了！我会把它作为答案发布

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

您正在关闭 p 条件内的 p 标记。因此，如果用户未登录，它永远不会关闭。这可能是样式混乱的原因。试试这个：

<div class="prosjekt">
    <p class="prosjekt_content">
        <%= project.content %>
        <% if user_signed_in? %>
           <%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>                              
        <% end %>
    </p>
    <%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>

或者，如果您不希望链接成为段落的一部分：

<div class="prosjekt">
    <p class="prosjekt_content">
        <%= project.content %>
    </p>
    <% if user_signed_in? %>
        <%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>                              
    <% end %>
    <%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>

【讨论】：