checkbox - 如何使用 Bootstrap 在表格中居中自定义复选框
问题描述
我尝试使用 Bootstrap 4 将包含在标题中删除所有和行中复选框的第一列居中,但没有成功,我尝试了 text-center CSS 类,但它不工作有人可以帮忙:
示例代码在 jsfiddle her 中可用:
我使用 Bootstrap 4 并且 html 代码在这里:
<div class="content-wrapper">
<div class="content-body">
<div class="row">
<div class="col-12">
<div class="card">
<form class="list list-customer" method="POST"
action="#">
<div class="table-responsive pt-0">
<table class="list-items dt-column-search table table-striped table-bordered dataTable">
<thead class="list-header">
<tr>
<th class="p-0 text-center">
<button type="button" data-multi="1"
onclick=""
class="act-delete-all btn btn-icon btn-flat-dark btn-sm waves-effect"
tabindex="1" aria-label="Delete" title="Delete selected entries">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</button>
</th>
<th class="customer-code sorting">
<a class=" " tabindex="1"
href="#">
Code<span class="float-right mr-1">
</span>
</a>
</th>
</tr>
<tr class="list-search">
<th class="dt-checkboxes-cell dt-checkboxes-select-all">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="checkboxSelectAll"
tabindex="">
<label class="custom-control-label" for="checkboxSelectAll"></label>
</div>
</th>
<th class="customer-code">
<input class="form-control form-control-sm" type="text" tabindex=""
placeholder="Search..." name="filter[val][3]" value="">
</th>
</tr>
</thead>
<tbody>
<tr class="list-item " data-label="Test user">
<td class="dt-checkboxes-cell">
<div class="custom-control custom-checkbox">
<input class="custom-control-input dt-checkboxes" type="checkbox" id="4"
name="id[]" value="4" tabindex="1">
<label class="custom-control-label" for="4"></label>
</div>
</td>
<td class="customer-code"><a class="items-field custom-link"
href="#"
tabindex="1">demo@example.com</a>
</td>
</tr>
<tr class="list-item " data-label="test@test.com">
<td class="dt-checkboxes-cell">
<div class="custom-control custom-checkbox">
<input class="custom-control-input dt-checkboxes" type="checkbox" id="2"
name="id[]" value="2" tabindex="1">
<label class="custom-control-label" for="2"></label>
</div>
</td>
<td class="customer-code"><a class="items-field custom-link"
href="#"
tabindex="1">test@test.com</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- c# - 我的单元测试因 TypeLoadException 而失败。这可能是 Visual Studio 错误、Nuget 包交互还是其他原因?
- c# - ASP.NET 页面 CSS 样式在 Visual Studio 中加载,但在浏览器中不加载
- laravel - Laravel - 如何添加全局信息,如 \Auth::user()
- php - 动态 mysql -> excel 导出
- javascript - Puppeteer PDF 从云端生成空白页,与邮递员一起工作。有什么想法吗?
- algorithm - 什么是近乎完全的二叉树?
- cloud-foundry - 关键云代工是否支持 Windows 7 32 位?
- android - 从另一个片段中的目录更新片段中的列表视图元素
- r - 如何在频率图的 y 轴上显示刻度?
- java - 使用 RestTemplate 调用外部 REST 端点时出错