Question

react-bootstrap-table中分页行的默认样式使用引导网格列大小调整类名称（例如＆＃34; col-xs-6＆＃34;）。我们使用了默认的不同大小的网格（60而不是12），因此分页元素最终会一直压成小列，一直到左边。

将班级名称设置为＆＃34; col-xs-30＆＃34;解决了这个问题。但我没有看到调整任何分页样式的选项。

我发现有一种完全自定义渲染分页元素的方法。这是我唯一的选择吗？复制原件并只更改col尺寸？

Answer 1

如果你看到documentation for pagination，这似乎是调整网格分页的独特方式。（参见自定义分页部分）

说这个，你总是可以使用上层的分页元素，即 react-bs-table-pagination ，并从这一点覆盖CSS，因此＆＃ 39;在react-bootstrap表选项中没有挂钩，可以将自己的类添加到分页中。

 <div class="react-bs-table-pagination">
    <div class="row" style="margin-top: 15px;">
        <div>
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
              <span class="dropdown   react-bs-table-sizePerPage-dropdown" style="visibility: visible;">

                   <!-- ... -->
                   <!-- DROPDOWN CODE -->
                   <!-- ... -->

              </span>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6" style="display: block;">
                <ul class="react-bootstrap-table-page-btns-ul pagination">

                   <!-- ... -->
                   <!-- PAGINATION ELEMENT CODE -->
                   <!-- ... -->

                </ul>
            </div>
        </div>
    </div>
</div>

Answer 2

在Chrome中按 Ctrl + Shift + C 并选择要设置样式的元素。在开发人员工具中，查看该元素正在使用的CSS类，复制它，转到项目的CSS文件，粘贴它，最后根据需要更改样式。

例如==＆gt;

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus

希望有所帮助。

干杯！

有没有办法改变react-bootstrap-table的分页样式？

2 个答案: