Question

我试图将两个自举按钮并排（水平）对齐并将它们放在表格单元格的中央，但是我不能

我使用bootstrap4

<div>
    <table class="table table-striped table-bordered">
      <tr>
        <th>ID</th>
        <th>Nom categorie </th>
        <th>Operations</th>
      </tr>
      <tr *ngFor="let categorie of categories">
        <td>{{ categorie.id }}</td>
        <td>{{ categorie.nom }}</td>
        <td >
          <div class="row">
            <div class="col-sm-12" style="display: flex; flex-direction: row;align-content: space-between">
              <button type="button"  class="btn btn-secondary">Mettre à jour </button>
              <button type="button"  class="btn btn-secondary">Supprimer</button>
            </div>
          </div>
          
        </td>
      </tr>
    </table>
  </div>

Answer 1

请尝试这个

将此样式赋予按钮div

justify-content: center;align-items: center;

并在第一个按钮上添加右小边距（mr-2），以在按钮之间留出空隙。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
    <table class="table table-striped table-bordered">
      <tr>
        <th>ID</th>
        <th>Nom categorie </th>
        <th>Operations</th>
      </tr>
      <tr *ngFor="let categorie of categories">
        <td>{{ categorie.id }}</td>
        <td>{{ categorie.nom }}</td>
        <td >
          <div class="row">
            <div class="col-sm-12" style="display: flex; flex-direction: row;justify-content: center;align-items:center;">
              <button type="button"  class="btn btn-secondary mr-2">Mettre à jour </button>
              <button type="button"  class="btn btn-secondary">Supprimer</button>
            </div>
          </div>
          
        </td>
      </tr>
    </table>
  </div>

Answer 2

尝试一下

.xbutton {
  width: 150px;
  height: 30px;
  margin: 0 10px;
}

#xrow{
  text-align: center;
}

.xbutton-row {
   flex: 1;
   text-align: center;
 }

<td id="xrow">
  <div class="row">
    <div class="col-sm-12" style="display: flex; flex-direction: row;align-content: space-between">
      <div class="xbutton-row">
        <button type="button"  class="btn btn-secondary xbutton">Mettre à jour </button>
      </div>
      <div class="xbutton-row">
      <button type="button"  class="btn btn-secondary xbutton">Supprimer</button>
       </div>
    </div>
  </div>
</td>

希望它对您有用

水平对齐两个按钮bootstrap4

2 个答案: