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

问题描述

目前我的分页如下:

我正在研究如何消除按钮之间的空间，但没有成功.在 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

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

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屋！