如何更改 Bootstrap Table Paginator 的位置？

Question

我正在使用Bootstrap Table源CSS。我想将文本和页面大小如下所示从表格底部移动到顶部。这是一个。

每页显示 159 行 [20] 行中的 1 到 20 行`

Answer 1

查看代码https://live.bootstrap-table.com/example/welcome.html

移动该div的位置：

<div class="float-left pagination-detail">
      <span class="pagination-info">
      Showing 1 to 10 of 800 rows
      </span><span class="page-list"><span class="btn-group dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="page-size">
        10
        </span>
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">50</a><a class="dropdown-item " href="#">100</a><a class="dropdown-item " href="#">All</a></div></span> rows per page</span></div>

将其移至：

之后

<div class="bs-bars float-left"><div id="toolbar">
  <button id="remove" class="btn btn-danger" disabled="">
    <i class="glyphicon glyphicon-remove"></i> Delete
  </button>
</div></div>

而不是原来的位置，在里面

<div class="fixed-table-pagination">...</div>

Answer 2

您可以使用

paginationVAlign

设置：

• paginationVAlign

的文档
• 演示

  paginationVAlign

通过将表格元素上的

data-pagination-v-align

设置为

"top"

、

"bottom"

或

"both"

来使用它。分页小部件的对齐方式将据此进行调整。