vue.js - Vuejs分页与bootstrap 4不兼容

Question

我在使用这个用于 vuejs 分页的Github包时遇到问题。它似乎可以在 bootstrap 3 上运行，但是当我使用 bootstrap 4 时，它就不起作用了。我的问题基本上是 bootstrap 4 没有正确设置列表项的样式。

我将 'pagination' 类放在 :container-class 上，它使列表内联，但不像正常引导分页应该看起来那样设置它的样式。它只是内联的简单列表。我什至尝试覆盖它并将我自己的 'mypagination' 类放在 :container-class 上，但仍然无法正确设置它的样式。在此先感谢您。

//VueJs Paginate code
<paginate
            :page-count="20"
            :click-handler="functionName"
            :prev-text="'Prev'"
            :next-text="'Next'"
            :container-class="'mypagination'">
        </paginate>



//My style code
<style scoped>
    .mypagination{
        list-style-type: none;
    }
    .mypagination li {
        display: inline !important;
    }
    .mypagination > li > a,
    .mypagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
    }
</style>

标签： vue.jspagination

Answer 1

您必须为引导程序 4 添加以下属性：

<paginate
  :page-count="20"
  :click-handler="clickCallback"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'pagination'"
  :page-class="'page-item'"
  :page-link-class="'page-link'"
  :prev-class="'page-item'"
  :next-class="'page-item'"
  :prev-link-class="'page-link'"
  :next-link-class="'page-link'"
  :active-class="'active'">
</paginate>