Javascript 无休止分页的麻烦

这真是糟糕透了！我有以下问题：

我使用twitter引导，并将对当前项目进行分页（增强为无休止的分页），目标是使用流畅的布局以4列格式显示所有项目。但是，在加载第二页后，将显示无休止的换页和分页

这是第一次访问时页面的加载方式

它正确地遵循中所述的流体嵌套，除未对准外，通常看起来不错

加载第二个页面后，页面如下所示：

而且布局真的很混乱。与第1列中的每个元素都属于自己的“span3”类不同，整个列是一个包含其他“span3”元素的“span3”

好的，下面是代码：

_幼稚园.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>

下面的代码用于无休止的分页（）：

幼儿园咖啡

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()

jQuery->
如果$（'.pagination'）.length
$（窗口）。滚动->
url=$（'.pagination.next_page'）.attr（'href'））
如果url&&$（窗口）.scrollTop（）>$（文档）.height（）-$（窗口）.height（）-50
$（'.pagination'）.html（''）
$.getScript（url）
$（窗口）。滚动（）

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

$（“#幼儿园”）。附加（“”）；
$（'.pagination'）。替换为（''；
$（'.pagination'）.remove（）；

不幸的是，我的js技能是零，所以除了在那个教程中学到的东西，我不能提供任何支持

---

最后，我的问题是：如何使用bootstrap的流体网格和无休止的分页将这些幼儿园显示在四列中

我就是爱你！因为没有人回答我的问题，我不得不找到自己的答案。我自己的成功故事。。。给你

首先，JS代码是好的，没有必要干扰它。。。但它给了我第一个线索：

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

$（“#幼儿园”）。附加（“”）；

此内容影响id为=“幼稚园”的标记并执行erb代码。但是，所述标记位于_pendential.html.erb partial中，因此在呈现结果render inside render之后执行（这就是为什么我在span 3中有span 3，在第一次调用第二个页面后有1列）

解决方案很简单（在渲染前插入id）：

现在出现的问题是，我有3个完整的栏目，第4栏只有一个元素。这是因为span3宽度已关闭。在/public/assets/aplication.css中进行了一些调整，现在页面如下所示：

我赢了

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