Question

我试图让我的网站使用bootstrap 3网格系统在每一行显示3篇文章div：

<div class="container-fluid">
<h1>NEWS</h1>

  <div class="row">

      <% @articles.each do |article| %>

        <div class="col-sm-4">
          <h2><%= article.title %></h2> 
          <p><strong>Author: </strong>
            <% article.author_id do |c| %>
              <p><%= c.first_name %></p>
            <% end %></p> 
          <p><strong>Excerpt: </strong><%= article.excerpt %></p> 

          <p><strong>Category: </strong>
            <% article.categories.each do |c| %>
              <%= c.name %>
            <% end %>
          </p> 

          <p><strong>Nr of comments: </strong><%= article.comments.count %></p> 

            <%= link_to article do %>
              <button type="button" class="btn btn-primary btn-sm">Show
              </button>
            <% end %>
            <%= link_to edit_article_path(article) do %>
              <button type="button" class="btn btn-success btn-sm">Edit
              </button>
            <% end %>
            <%= link_to article, method: :delete, data: { confirm: 'Are you sure?' }  do %>
              <button type="button" class="btn btn-danger btn-sm">Delete
              </button>
            <% end %>

        </div>
    <% end %>

          </div> <!-- .row -->

    </div> <!-- .container -->
<% content_for :aside do %>
  <%= render 'sidebar_popular' %>
  <%= render 'sidebar_categories' %>
<% end %>

第一行是完美的，但第二行只渲染两个div（如图所示） http://postimg.org/image/c5uwv6iyn/

我该如何解决？我尝试插入，但没有改变任何东西（也许我把它放在错误的地方）。

Answer 1

通过它的外观，您将在一行中呈现所有列。您需要更改<% @articles.each do |article| %> 这样它就会每隔三列开始一个新行，即

  <% @articles.each_slice(3).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |article| %>
         <div class="col-sm-4">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

您可能不需要第一个循环上的to_a

Rails和bootstrap - 无法获得具有3个div的行，以便正确对齐

1 个答案: