Bootstrap 4表边失去了它的风格



我的页面中有一个模态,其中有一个表。当我将表转为表边界时,它失去了引导样式,转而使用普通的html表!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Customer Modal -->
<div class="modal" style="text-align: center;" tabindex="-1" role="dialog" id="customerModal">
<div class="modal-dialog" style="max-width:100%; width:auto !important; display: inline-block;" role="document">
<div class="modal-content">
<div class="modal-body">
<div class=" justify-content-center ml-auto">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control" placeholder="جستجو ..." />
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="container modal-table">
<table class="table-bordered">
<thead class="thead-light">
<tr>
<th>Code</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Email</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>john@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">exit</button>
</div>
</div>
</div>
</div>

我甚至不能为我的表使用任何CSS,它也不会改变。我想创建一个带有边框但具有引导样式的表。只有当它的class:"table"时,它才会使用引导式进行查找

从bootstrap主css复制表类,然后将其放在表边界类上。

最新更新