数据表分页按钮 – 删除不需要的空间

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

我正在尝试找出如何删除按钮之间的空间，但一直没有成功。 在css文件中，我可以找到的唯一引用分页是：

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）：

 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并不完全是我的强项。

有没有人知道是否有其他可能与相关的分页按钮的引用？ 或者必须彻底解决问题？

Answer 1

他们的bug数据库中已经注意到了这个问题。 你不需要破解css。

引导分页看起来不好＃39

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

所以只需删除jquery.dataTables.css ，并在你的html样式表中保留dataTables.bootstrap.min.css 。

Answer 2

哦，是的。 容易重现错误。 要解决此问题，请在其他CSS引用之后添加此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; } 

演示 – > http://jsfiddle.net/s6c35ogt/
尝试在右上角注释掉添加的CSS，您将看到与您描述的完全相同的行为。