Неверно выровненный HTML в приложении rails - PullRequest
0 голосов
/ 26 января 2019

Я следовал руководству Hartl, чтобы создать ToDoList с системой тегов, также с помощью этого словаря и видео .

Однако, как следствие создания дополнительной страницы для отфильтрованных задач, html не выглядит хорошо выровненным способом, как раньше.Это видно из изображения файла нижнего колонтитула, которое не централизовано, следовательно, не выровнено с предложением нижнего колонтитула (которое все еще централизовано),

wrong filter

в то время как моя домашняя страница, кажется, не имеет этой проблемы.

correct filter

Кто-нибудь знает решение проблемы?Я действительно плохо работаю с этими html-файлами, встроенными в Ruby, потому что рендеринг происходит практически везде.Более того, я не совсем понял, как учебник смог отфильтровать возможный момент, когда мы нажимаем на теги.Мне не нужно текстовое поле в соответствии с домашней страницей.Дайте мне знать, если требуется дополнительная информация.

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)

1 Ответ

0 голосов
/ 26 января 2019

Это похоже на проблему с системой начальной загрузки , ваш основной контент находится внутри 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...