Rails应用程序中未对齐的HTML

Question

我已经按照Hartl的教程制作了带有标记系统的ToDoList，并且还借助了此单词指南和视频。

但是，由于为过滤后的任务增加了一个页面，因此html不能像以前那样以一种很好的对齐方式呈现。 这可以从页脚文件的图像看到，该图像未居中，因此与页脚的句子（仍居中）不对齐，

而我的主页似乎没有这个问题。

有人知道解决问题的办法吗？ 由于渲染几乎随处可见，因此我对使用Ruby嵌入的这些html文件真的很不好。 而且，我并不真正了解该教程如何能够在单击标签后立即进行过滤。 我不需要按照首页Feed的文本框。 如果需要更多信息，请告诉我。

日志中涉及文件的HTML代码

application.html.erb（任何页面的总体布局）

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <% flash.each do |message_type, message| %>
        <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
      <% end %>
      <%= yield %>
      <%= render 'layouts/footer' %>
      <!-- <%= debug(params) if Rails.env.development? %> -->
    </div>
  </body>
</html>

<script>
  $(document).on('ready page:load', function () {
    $('#micropost_tag_ids').chosen({
      allow_single_deselect: true,
      width: '100%'
    })
  });
</script>

micropost / index.html.erb（已过滤页面）

<h1>Filtered Micropost Page</h1>
<div class = "col-md-8 offset-2">
  <% @microposts.each do |micropost| %>
    <p><%= truncate(micropost.content, length: 50) %></p>
    <p><small>Tags: <%= raw micropost.tags.map(&:name).map { |t| link_to t, tag_path(t) }.join(', ') %></small</p>
        <span class="timestamp">
            Posted <%= time_ago_in_words(micropost.created_at) %> ago.
            <% if current_user?(micropost.user) %>
              <%= link_to "Done", micropost_path(micropost), method: :delete, data: { confirm: "Keep up the good work!" } %>
            <% end %>
        </span>
    <% end %>
</div>

Footer.html.erb

<footer class="footer">
  <small>
    A To-Do Manager</a>
    by <a href="https://www.google.com"> Prashin</a> for
    <a href = "http://www.google.com">Prashin</a>,
    based on the rails tutorial guide by
    <a href = "https://www.railstutorial.org/book">Michael Hartl</a>.
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
    </ul>
  </nav>
  <br>

  <br><br>
  <p align = center>
  <%= link_to image_tag("AikenDueet.jpg", alt: "KenyuDueet"),
            'www.google.com' %>
            <br>I can do it!</p>
</footer>

header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "To-Do App", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home", root_path %></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Users <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "All Users", users_path %></li>
            <li><%= link_to "Administrators", users_admin_path %></li>
          </ul>
        </li>
        <% if logged_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "#{current_user.name}", current_user %></li>
              <li><%= link_to "Account Settings", edit_user_path(current_user) %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: :delete %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

日志

  Rendered microposts/index.html.erb within layouts/application (199.0ms)
  Rendered layouts/_rails_default.html.erb (55.9ms)
  Rendered layouts/_shim.html.erb (0.2ms)
  Rendered layouts/_header.html.erb (0.7ms)
  Rendered layouts/_footer.html.erb (0.8ms)
Completed 200 OK in 278ms (Views: 259.1ms | ActiveRecord: 11.4ms)

Answer 1

这似乎是一个引导网格系统问题，您的主要内容位于div.container中，但是页脚位于同一容器中，并且没有在其上定义一些列。

解决方案1：将页脚放在一行中并定义您的列

<div class="container">
 <div class="row">
    <%= render 'layouts/footer' %>
  </div>
</div>

解决方案2：将页脚放在其自己的div.container上，并为其定义列

<div class="container">
  <% flash.each do |message_type, message| %>
    <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
  <% end %>
  <%= yield %>

  <!-- <%= debug(params) if Rails.env.development? %> -->
</div>
<div class="container">
   <%= render 'layouts/footer' %>
</div>

Rails应用程序中未对齐的HTML

问题描述

1 个解决方案

解决方案1
0 2019-01-26 13:54:37

Rails应用程序中未对齐的HTML

问题描述

1 个解决方案

解决方案1 0 2019-01-26 13:54:37

解决方案1
0 2019-01-26 13:54:37