홈>2020-03-18 20:36

레일스 애플리케이션에서 잘못 정렬 된 HTML

Hartl의 튜토리얼에 따라 태그 시스템으로 ToDoList를 작성하고이 단어 안내 및 비디오 .

그러나 필터링 된 작업에 대한 추가 페이지를 만들면 html이 이전과 같이 잘 정렬되지 않습니다. 이것은 바닥 글 파일의 이미지에서 볼 수 있습니다. 중앙 집중화되어 있지 않으므로 바닥 글의 문장 (여전히 중앙 집중화되어 있음)과 일치하지 않습니다.

홈페이지에이 문제가없는 것 같습니다.

문제에 대한 해결책을 아는 사람이 있습니까? 렌더링이 거의 모든 곳에서 발생한다는 사실 때문에 Ruby에 포함 된 html 파일로 작업하는 것은 정말 나쁩니다. 또한, 나는 우리가 태그를 클릭하는 순간 튜토리얼이 어떻게 필터링을 할 수 있었는지 이해하지 못했습니다. 홈페이지 피드에 따라 텍스트 상자가 필요하지 않습니다. 추가 정보가 필요한 경우 알려주십시오.

로그에 포함 된 파일의 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)

htmlruby-on-railsruby

답변 # 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>

Python2.net

레일스 애플리케이션에서 잘못 정렬 된 HTML

관련 자료