css - 使用 Bootstrap 对齐不同行上的多个表

Question

我正在使用 Twitter Bootstrap 2 并且在让表格对齐时遇到问题。

我在我的 Rails 应用程序中有一个视图，我想在其中显示 4 个表 - 每行 2 个表 (2 x 2)，如下所示：

|   table   ||  table   |
|   table   ||  table   |

相反，我得到了这个：

|   table   ||  table   |
         |   table   |
|  table   |

前两个表按我想要的方式对齐，但第三个表没有正确水平对齐我不知道为什么。

# view
<div class="container">    
  <div class="row">
    <%= render :partial=>"article_count", :locals=>{:most_popular_articles=>@most_popular_articles}%>
  </div> 
</div>

# _article_count
<% @most_popular_articles.each do |article| %>
  <div class="span5">
    <table class="table table-hover">
      <thead>
        <tr>
          # header names
        </tr>
      </thead>
      <tbody>
        <% user.each do |user| %>
          <tr>
            # field values
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
  <div class="span1"></div>
<% end %>

这是该页面的链接，您可以查看它的外观以及呈现的完整 CSS 和 HTML。

Answer 1

尝试这样的事情：

<% @most_popular_articles.in_groups_of(2).each do |article_array|%>
    <div class="row">
        <% article_array.each do |article| %> 
            <div class="span5">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      # header names
                    </tr>
                  </thead>
                  <tbody>
                    <% user.each do |user| %>
                      <tr>
                        # field values
                      </tr>
                    <% end %>
                  </tbody>
                </table>
              </div>
            <div class="span1"></div>
                <%end%>
        </div>
<%end%>