Bootstrap vue分页样式设计

Question

我需要一些帮助。我试图风格bootstrap 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>

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