0

Twitter Bootstrap 2 を使用していますが、テーブルを揃えるのに問題があります。

次のように、Rails アプリに 4 つのテーブル (1 行あたり 2 つのテーブル (2 x 2)) を表示するビューがあります。

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

代わりに、私はこれを得ています：

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

最初の 2 つのテーブルは希望どおりに配置されていますが、3 番目のテーブルは水平方向に正しく配置されていません。理由がわかりません。

# 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 を確認できます。

4

1 に答える 1

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%>
于 2013-08-08T18:14:41.130 に答える