Bootstrap vue 分页样式

Posted 2023-02-22

【中文标题】Bootstrap vue 分页样式

【英文标题】：Bootstrap vue pagination styling

【发布时间】：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>

【参考方案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>