javascript - boostrap 3 + 数据表按钮:错位
问题描述
我在使用 boostrap 3 和数据表按钮 ( https://datatables.net/extensions/buttons/ ) 时遇到错位。如何对齐它们?
div.dt-buttons
设置边距时一切正常margin-top:2px;
,不知道为什么,但感觉不对,有什么“标准方式”吗?
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button active">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a>
</li>
<li class="paginate_button ">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a>
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">Next</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>
解决方案
有几种方法可以去这里。我可能会从分页列表中删除边距作为重置。然后,您可以改为使用网格添加间距。
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
ul.pagination {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button active">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a>
</li>
<li class="paginate_button ">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a>
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">Next</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>
推荐阅读
- bro - Bro / Zeek 调试日志?
- content-management-system - 使用 Orchard CMS,favicon 设置在哪里?
- javascript - 我尝试使用 Javascript 创建叠加层,但叠加层没有显示
- swift - 为 UIKitForMac 构建 iPad 应用程序时构建错误
- solidity - 有没有办法在 Solidity 中使用浮点数?我需要他们来写一份我正在写的小合同。如果浮动是不可能的,我可以用什么代替?
- tensorflow - “Tensorflow 的第一步”,如何访问 colab 之外的数据文件?
- python - “即时”保存“file.write”数据以进行实时数据查看
- r - 使用R中的Haversine公式和自定义函数查找两个城市之间的距离
- c - libblkid 仅适用于 root 并且在以 root 身份运行后
- git - GIT:使 2 个修订成为单个修订而不是 2 个修订