css - 如何删除数据表分页按钮中的空格

Question

你能帮我找到一种方法来删除数据表分页按钮中的空格吗？

我已经引用了以下 URL:

DATA TABLES BOOTSTRAP 4 EXAMPLE

我已经完全按照上面所说的添加了 .js 和 CSS 文件，但是没有用。

Datatables pagination buttons - Remove unwanted space

以上均无效。请帮助我覆盖当前功能。谢谢。

请在下面找到我工作过的代码:

HTML

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
  <script src="javascript/third_party/popper.min.js"></script>
  <script src="javascript/third_party/bootstrap.min.js"></script>


  <!-- DATA TABLES -->
  <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

CSS

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding : 0px;
  margin-left: 0px;
  display: inline;
  border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: 0px;
}

查询

$.fn.dataTable.moment('MM/DD/YYYY');
  $(`#${ID}`).DataTable({
    columnDefs: [{
      targets: [0, 1, 2, 5, 6, 7],
      orderable: false
    }],
    "order": [[4, "asc"]]
  });

Answer 1

经过这么多研究，我发现

在使用 bootstrap css 时，不要使用 jquery.dataTables.css。否则会在分页中产生间距问题。

如您在 JsBin 中所见，Bootstrap Datatable 4 独立运行良好我创造的。

希望，如果您指向正确的 poper.js 网址，如下所示:否则这也会导致 bootstrap 4 css 出现问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

编辑:
如果你看到下面 codepen ，这与您面临的问题相同。

如果您打开该代码笔，并删除以下行，它就可以正常工作。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">

希望这对您有用。如果没有，请在下方评论。