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 %>

这是一个link to the page，因此您可以看到它的外观，以及呈现的完整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%>

使用Bootstrap在不同行上对齐多个表

1 个答案: