Ruby on rails 使用kaminari和bootstrap定制css

我试着用paginate和kaminari。我的项目使用了bootsrap css，结果非常糟糕：）

html由nokogiri生成

<nav class="pagination">
    <span class="first">
  <a href="/admin/book_borrow/borrow?locale=en">« First</a>
</span>

    <span class="prev">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>

        <span class="page">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>

        <span class="page current">
  2
</span>

        <span class="page">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">3</a>
</span>

        <span class="page">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">4</a>
</span>

    <span class="next">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">Next ›</a>
</span>

    <span class="last">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">Last »</a>
</span>

  </nav>

2.

我想在引导页面中进行分页，我该怎么做？

---

请帮忙

发布此问题后，我找到了解决方案：

只需转到控制台并键入：

rails generate kaminari:views bootstrap4

它会将一些Haml文件下载到您的应用程序中，并且视图会发生更改。它还支持引导2和3，例如

rails generate kaminari:views bootstrap3

---

以下是Kaminari视图的一些主题：

几乎放弃，直到我找到“”

简而言之，在

rails g kaminari:default

之后，进入app/views/kaminari下创建的视图，并更改标记以适合您的样式

我进入

\u paginator.html.erb

，将

更改为

，并将所有

标记替换为

为了获得适合我的应用程序的引导样式，我将

\u paginator.html.erb中的
标记更改为
，将
标记更改为simple

这里有几个问题也许其他人可以帮助解决：

\u page.html.erb
中有一个erb，它在激活时更改当前页面的类。它会弄乱对齐方式，因此要绕过此问题，请将
更改为

插入“…”块的
\u gap.html.erb
视图也会出错。将其替换为
，以使其能够很好地内嵌

我8周前才开始编写代码，所以肯定有更好的方法来实现这一点，也有更好的方法来清理1和2，但如果您只是想让事情看起来正确，并按预期运行，请稍后试一试并进行微调
 只需将以下css添加到应用程序中即可。css

.pagination a, .pagination span.current, .pagination span.gap {
    float: left;
    padding: 0 14px;
    line-height: 38px;
    text-decoration: none;
    background-color: white;
    border: 1px solid #DDD;
    border-left-width: 0;
}

.pagination {
    border-left: 1px solid #ddd;
    .first{
        padding : 0;
        float: none;
        border: none;
    }
    .prev {
        padding : 0;
        float: none;
        border: none;
    }
    .page{
        padding : 0;
        float: none;
        border: none;
    }
    .next{
        padding : 0;
        float: none;
        border: none;
    }
    .last{
        padding : 0;
        float: none;
        border: none;
    }
}

< > >强> > BooTrasp2、BooTrasP3、BooTrasP4、波旁、BulMA、基金会、基础5、GITHUB、谷歌、物化、PueRESS、SypLogiGUI U/P> HI，谢谢！希望我的回答能帮你节省一点时间：）rails生成kaminari:views bootstrap4hi，很好的尝试！但有一个更简单的方法。您可以使用kaminari的引导主题，它是automaticHi Duykhoa-感谢您的评论。希望回复对那些希望定制主题的人仍然有帮助。这是一个很好的建议。我还添加了一行css:a:hover{background color:lightgreen；}，它在分页链接上添加了一个悬停动作。这是在Rails 5.1和bootstrap 3上测试的。如何更改突出显示的页码的字体颜色/背景？
rails generate kaminari:views bootstrap4