3

react-bootstrap-table 中分页行的默认样式使用引导网格列大小调整类名称（如“col-xs-6”）。我们使用了一个不同大小的网格，而不是默认的（60 而不是 12），所以分页元素最终会被压扁到左边的小列中。

将类名设置为“col-xs-30”可以解决问题。但我没有看到调整任何分页样式的选项。

我看到有一种方法可以完全自定义渲染分页元素。那是我唯一的选择吗？复制原件并仅更改 col 大小？

4

2 回答 2

4

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

例如 ==>

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

在此处输入图像描述

希望有帮助。

干杯!

于 2018-04-16T00:34:48.927 回答
0

如果您看到pagination 的文档，这似乎是调整网格分页的独特方法。（请参阅此处的自定义分页部分）

话虽如此，您始终可以将上层类用于分页元素，即react-bs-table-pagination并从此时开始覆盖 CSS，因此 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>
于 2017-09-13T09:27:32.523 回答