水平对齐两个按钮 bootstrap4

Posted 2023-03-05

【中文标题】水平对齐两个按钮 bootstrap4

【英文标题】：align two buttons horizontally bootstrap4

【发布时间】：2020-12-20 09:14:49

【问题描述】：

我正在尝试将我的两个引导按钮并排（水平）对齐并将它们放在表格单元格中，但我不能

我使用 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>

【问题讨论】：

将 justify-content-center 类添加到按钮周围的包装器中

【参考方案1】：

试试这个

.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>

希望对你有用

【讨论】：

你好@Bodda，我尝试了，但我有边距，但两个按钮不在表格单元格的中心

我已经编辑了它现在应该在行中居中的评论

嗨@Bodda，我完成了xrow，但它没有居中

是的，我知道了，将这个 flex:1 添加到 xbutton 样式中； .我也会编辑代码

嗨@Bodda，现在它居中，但我的表格单元格上有两个大按钮。我删除了我的 xbutton 类中的 width 属性，但结果还不够，你有别的想法吗

【参考方案2】：

请试试这个，

将此样式赋予按钮 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>