我今天遇到的问题是我正在生成这个 HTML 表:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<br>
<h2 class="text-secondary border border-secondary border-top-0 border-left-0 border-right-0 text-center">Lista de Paises</h2>
<div class="form-group row">
<div class="col-sm-6">
<input type="submit" value="Crear Pais" class="btn btn-success" />
</div>
</div>
<table class="table table-active text-center">
<thead class="thead-dark">
<tr>
<th>PAIS</th>
<th>OPCIONES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mexico</td>
<td>
<div class="form-group row">
<div class="col-sm-2">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
<div class="col-sm-2">
<input type="submit" value="Eliminar" class="btn btn-danger" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
正如您所看到的按钮editar
并eliminar
插入到列的左侧OPCIONES
,我来寻求您的帮助,因为我试图纠正它们,将它们与 CSS 或在相同的 HTML 中居中,但我没有达到他们的目标. 所以我问你是否可以纠正这个问题,将按钮居中会对我有很大帮助。谢谢
在 bootstrap 4 中
justify-content-center
,您拥有可以应用于 div.row 的类:您可以将两个按钮留在同一个 div 中,这样您就可以使用该类
.text-center
我把例子留给你: