数据表分页按钮-删除不必要的空间 [英] Datatables pagination buttons - Remove unwanted space

问题描述

目前，我的分页看起来像这样:

Currently my pagination looks as such:

我正在尝试找出如何删除按钮之间的空间，但操作失败.在css文件中，我只能找到有关分页的参考:

I'm trying to work out how to remove the space between the buttons, but have been unsuccessful. In the css files the only references I can find to pagination are:

jquery.dataTables.css(319-394):

jquery.dataTables.css (319 - 394):

}
.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333333 !important;
  border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333333 !important;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, white 0%, gainsboro 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, white 0%, gainsboro 100%);
  /* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: 1px solid white;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #585858 0%, #111111 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #585858 0%, #111111 100%);
  /* W3C */
} */
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: #2b2b2b;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  /* W3C */
  box-shadow: inset 0 0 3px #111;
}

dataTables.bootstrap.css(32-50):

dataTables.bootstrap.css (32 - 50):

div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
}

div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    div.dataTables_length,
    div.dataTables_filter,
    div.dataTables_info,
    div.dataTables_paginate {
        text-align: center;
    }
}

但是，我似乎找不到任何大的边距或填充的引用.尽管CSS并不是我的强项.

However, I can't seem to find a reference to any large margins or padding. Although CSS isn't exactly my strong suit.

有人知道是否还有其他可能指向分页按钮的引用吗?还是必须彻底解决问题?

Does anyone know if there are other references to the paginate buttons that might be related? Or have to fix the problem outright?

推荐答案

此问题已在其错误数据库中指出. 您无需破解CSS.

This issue has already been noted in their bug database. You do not need to hack the css.

引导程序分页看起来很糟糕#39

由于Bootstrap和集成文件提供了所需的一切，因此无需包括DataTables自己的样式表(jquery.dataTables.css).

No need to include DataTables' own stylesheet (jquery.dataTables.css) since Bootstrap and the integration file provide everything that is needed.

因此，只需删除jquery.dataTables.css，并将dataTables.bootstrap.min.css保留在您的html样式表中即可.

So just delete jquery.dataTables.css, and keep dataTables.bootstrap.min.css in your html style sheets.

这篇关于数据表分页按钮-删除不必要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！