Rails和Bootstrap-无法获得各具有3个div的行以正确对齐

debugcn 发表于 Dev

席蒙·博鲁基（Szymon Borucki）

我试图让我的网站使用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/

我该如何解决？我尝试插入，但是并没有改变任何内容（也许我把它放错了地方）。

ob264

通过它的外观，您可以将所有列呈现在一行中。您需要更改，<% @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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。