0

これはやっかいです！私は次の問題を抱えています：

現在のプロジェクトでは、twitterブートストラップとwill_paginate（無限のページ付けに拡張）を使用しています。目標は、流動的なレイアウトを使用して、すべてのアイテムを4列形式で表示することです。ただし、2番目のページが読み込まれると、無限のページが分割され、代わりにwill_paginateが表示されます。

これは、初めてアクセスするときにページが読み込まれる方法です ページ1

Twitterのブートストラップページで説明されているように、流体の入れ子に正しく従い、ずれを除いて一般的に見栄えがします。

2番目のページが読み込まれると、ページは次のようになります。 2ページ

レイアウトがめちゃくちゃになっています。列1の各要素がそれ自体の「span3」クラスにある代わりに、列全体が他の「span3」要素を含む「span3」になります。

わかりました、コードは次のとおりです。

_kindergarten.html.erb

<div class="span3" id="kindergartens">
    <%= link_to kindergarten.name, kindergarten %>
</div>

index.html.erb

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <%= render @kindergartens %>
        </div>

        <div class="pull-right">
            <%= will_paginate %>
        </div>

    </div>
</div>

そして、次のコードは無限のページネーションに使用されます（ソース）：

幼稚園.js.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').html('<img src="assets/spinner.gif" />')
        $.getScript(url)
    $(window).scroll()

index.js.erb

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');
<% if @kindergartens.next_page %>
  $('.pagination').replaceWith('<%= escape_javascript(will_paginate(@kindergartens)) %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

残念ながら、私のjsスキルはゼロなので、そのチュートリアルで学んだこと以外はサポートを提供できません。

だから、結局のところ、私の質問はこれです：ブートストラップの流体グリッドと無限のページ付けを使用して、これらの幼稚園を4列に表示するにはどうすればよいですか？

4

1 に答える 1

1

私はstackoverflowが大好きです！誰も私の質問に答えないので、私は自分の質問を見つけることを余儀なくされています。私自身のサクセスストーリー...ここにあります。

まず第一に、JSコードは問題なく、干渉する必要はありません...しかし、それは私に最初の手がかりを与えました：

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');

これは、id = "kindergartens"のタグに影響を与え、erbコードを実行します。ただし、上記のタグは_kindergarten.html.erbパーシャル内にあるため、レンダリング後に実行され、レンダリング内でレンダリングされます（そのため、2番目のページを最初に呼び出した後、スパン3と1列内にspan3がありました）。

解決策は単純でした（レンダリングの前にIDを挿入）：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid" id="kindergartens">
                <%= render @kindergartens %>
            </div>
        </div>
    </div>

    <div class="pull-right">
        <%= will_paginate %>
    </div>

</div>

今発生した問題は、4番目に3つの完全な列と1つの要素しかないことでした。これは、span3の幅がずれていたためです。/public/assets/aplication.css内でいくつかの調整を行うと、ページは次のようになります。

ここに画像の説明を入力してください

私の勝ち！

于 2012-09-10T20:34:05.823 に答える