使用Bootstrap Angular6数据表进行分页样式的页脚样式

Question

我使用angular 6数据表对表中的数据进行分页。

https://www.npmjs.com/package/angular-6-datatable

一切正常，但我无法处理mfBootstrapPaginator页脚中的样式

如您所见，该项目不在一行中。如何将它们设置成一行或至少彼此相邻？

<div class="table-responsive">
  <table id="tablePreview" class="table table-hover table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data; let i = index;">
        <td></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- I got 8 columns in my project -->
        <td colspan="8">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25, 50, 100]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

我使用Angular 6，Bootstrap 4

Answer 1

更改分页类的显示：

.pagination {
   display: inline-flex !important;
}

Answer 2

我现在，这个问题已经解决了，但也许可以帮助某个人。我是这样写的：

<style>
  ul.pagination {display: inline-flex !important;}
  .pagination li.active .page-link {background-color: rgb(54,61,71) !important; border-color: rgb(54,61,71) !important;}
</style>

在我的index.html中，位于head close标签之前，它对我有用。希望对您有所帮助。