Vuejs分页与Bootstrap 4不兼容

Question

我在使用Github软件包进行vuejs分页时遇到了麻烦。它似乎可以在Bootstrap 3上运行，但是当我使用Bootstrap 4时，它根本不起作用。我的问题基本上是引导程序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>

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>