Bootstrap vue 分页样式答案

【问题标题】：Bootstrap vue pagination stylingBootstrap vue 分页样式
【发布时间】：2020-09-21 03:51:18
【问题描述】：

我需要一些帮助。我正在尝试设置引导 vue 分页的样式，但我无法实现。我唯一能做到的就是将分页向左移动 50%。我无法设置 ul、li 和 li 内的按钮的样式，例如更改 ul、li 和按钮的背景、文本颜色等。我什至在它们上使用了类名，但没有任何效果。

var app = new Vue({
  el: '#app',
  data: () => ({
    currentPage: 1,
    rows: 50
  }),
})

.pagination {
      margin-left: 50%;

      ul {
        text-align: right;
        li {
          float: right !important;
        }
      }

      .page-item {
        color: $color-red;
      }

      .page-link {
        color: $color-red;
      }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
        
        
<div id='app'>
<b-container 
class="pagination-container">
<b-pagination 
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

编译您的 sass 文件，并检查元素以获取选择器

var app = new Vue({
  el: '#app',
  data: () => ({
    currentPage: 1,
    rows: 50
  }),
})

.pagination {
      margin-left: 50%;

     
}

 .pagination ul {
        text-align: right;
        
      }
      
     .pagination li {
          float: right !important;
        }
.pagination .page-item {
        color: red;
}

.pagination .page-link {
        color: red;
}

.pagination .page-item.active .page-link {
        color: #000;
        background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
        
        
<div id='app'>
<b-container 
class="pagination-container">
<b-pagination 
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>

【讨论】：