DataTables按钮不在窄屏幕上居中
我有一个使用Twitter Bootstrap 3和使用一些按钮设置的DataTable。这是初始化的代码：
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
如您所见，按钮位于dataTables_length和dataTables_filter包装器的中间位置，这些包装器分别包装当前显示的行数和输入搜索。
只要宽度大于768px，所有工作都按预期工作。当进入下方时，三个col-sm-4列每个都正确地在它们自己的行上，但是，当dataTables_length和dataTables_filter居中时，按钮的包装是左对齐的，没有多大意义，因为它有text-center类，应该保持中心对齐。
普通表：
收缩桌：
我想我在这里遗漏了一些东西，但是我无法找到问题。
Here是一个JSFiddle示例。
1 个答案:
答案 0 :(得分：1)
更新：在此修复了问题：https://jsfiddle.net/phgw8kbx/11/ div＆＃39; dt-buttons btn-group＆＃39;使用100％宽度应该是自动的，或者您需要使元素内联块中心对齐。 只需在某处添加此css即可正常工作。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(function() {
$.fn.dataTable.ext.buttons.refresh = {
text: 'Aggiorna',
className: 'btn-sm',
action: function (e, dt, node, config) {
}
};
bookingsTable = $('#bookings-table').DataTable({
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
},
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'excel',
className: "btn-sm",
text: 'Esporta',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
},
{
extend: 'colvis',
className: "btn-sm",
text: 'Colonne'
},
'refresh'
],
scrollY: 500,
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: true,
select: true
});
});<!-- begin snippet: js hide: false console: true babel: false --><!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> //TODO: set custom favicon-->
<title>Gestione avanzata</title>
<!-- Font Awesome v4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Twitter Bootstrap v3.3.7 core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Bootstrap DataTables CSS v1.10.16 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<!-- DataTables Bootstrap Buttons CSS v1.5.1 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/bookings_manager.css" />
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12">
<h2 class="text-center">Storico prenotazioni</h2>
<!-- Vehicles' table -->
<div class="">
<table id="bookings-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>ID prenotazione</strong></td>
<td><strong>Veicolo</strong></td>
<td><strong>Impiegato</strong></td>
<td><strong>Centro</strong></td>
<td><strong>Data</strong></td>
<td><strong>Partenza da</strong></td>
<td><strong>Ora di partenza</strong></td>
<td><strong>Tragitto intermedio</strong></td>
<td><strong>Ritorno a</strong></td>
<td><strong>Ora di ritorno</strong></td>
<td><strong>Servizio</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Stato</strong></td>
<td><strong>Storia</strong></td>
<td><strong>Opzioni</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal to show the history of a booking -->
<div class="modal fade" id="booking-history-modal" tabindex="-1" role="dialog" aria-labelledby="booking-history-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-history-modal-label">Storico prenotazione</h4>
</div>
<div class="modal-body">
<table id="booking-history-table" class="table table-bordered table-striped text-center" cellspacing="0" width="100%">
<thead>
<tr>
<td><strong>Impiegato</strong></td>
<td><strong>Azione</strong></td>
<td><strong>Motivazione</strong></td>
<td><strong>Data e ora</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to permanently delete a booking -->
<div class="modal fade" id="booking-delete-modal" tabindex="-1" role="dialog" aria-labelledby="booking-delete-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="booking-delete-modal-label">Elimina prenotazione</h4>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare in maniera definitiva questa prenotazione?
Essa verrà eliminata dal database, e non sarà più possibile recuperarla. Verrà eliminata anche dallo storico delle prenotazioni.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="confirm-delete-booking-button">
<span class="fa fa-trash fa-fw" aria-hidden="true"></span>
Elimina
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Modal to give information about the last action (error/success) -->
<div class="modal fade" id="action-info-modal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="action-info-modal-label">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="closeIcon" data-dismiss="modal" aria-label="Chiudi"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="action-info-modal-label"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="refresh-page-button">
<span class="fa fa-refresh fa-fw" aria-hidden="true"></span>
Aggiorna la pagina
</button>
<button type="button" class="btn btn-warning" id="report-error-button">
<span class="fa fa-bug fa-fw" aria-hidden="true"></span>
Segnala errore
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- DataTables JSzip v2.5.0 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<!-- Datatables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap DataTables Core JS v1.10.16 -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<!-- DataTables Bootstrap Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.min.js"></script>
<!-- DataTables HTML5 Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<!-- DataTables Column Visbility Buttons JS v1.5.1 -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<!-- Datatables fixedColumns JS v3.2.4 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css"/>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
</body>
</html>
div.dt-buttons {
width: auto !important;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？