如何在引导程序 4 中垂直对齐表单行类中的按钮

Question

在将标签与按钮相关联时，我无法使一组表单行按钮保持一致。分配给列宽（例如 col-3）的按钮的行为与分配有自动宽度（col-auto）的按钮的行为不同。

目标是使所有按钮与按钮上方的文本标签垂直对齐。随着视口大小的变化，文本标签应跟随按钮的位置。我试过使用 .align-self-baseline 似乎没有效果。

如果我在按钮上方添加一个带有自动调整大小的列的空白标签，它会将文本放置在按钮的左侧而不是上方。标签需要显示在按钮上方，因为目标应用程序正在显示端口宽度有限的移动设备上显示。以下是两者的 sn-ps：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <div class="container">
    <form action="#">
    
      <div class="form-row">
        <div class="col-4 text-center">
          <label>Desired</label>
          <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
        </div>

        <div class="col-auto text-center">
          <label>undesired</label>
          <button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true">Button 2</button>
        </div>        
      </div>  <!-- row -->
 
      <div class="form-row mt-4">
        <div class="col-4 text-center">
          <label>Desired</label>
          <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Row 2 Button</button>
        </div>

        <div class="col-auto text-center">
          <button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true">Not aligned with Row 2 Button</button>
        </div>        
      </div>  <!-- row -->
 
    </form>
  </div>

Answer 1

关键在 btn-block 类中 - 它为具有 col-4 类的 div 内的按钮提供 display:block 属性 - 如果删除它，对齐方式将相似

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <div class="container">
<form action="#">

  <div class="form-row">
    <div class="col-4 text-center">
      <label>Desired</label>
      <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
    </div>

    <div class="col-auto text-center">
      <label>undesired</label>
      <button type="submit" class="btn btn-sm btn-block btn-outline-primary active" aria-pressed="true">Button 2</button>
    </div>        
  </div>  <!-- row -->
 
  <div class="form-row mt-4">
    <div class="col-4 text-center">
      <label>Desired</label>
      <button type="submit" class="btn btn-sm btn-outline-primary btn-block active btn-block" aria-pressed="true">Row 2 Button</button>
    </div>

    <div class="col-auto text-center d-flex">
      <button type="submit" class="btn btn-sm btn-outline-primary align-self-end active" aria-pressed="true">Not aligned with Row 2 Button</button>
    </div>        
  </div>  <!-- row -->
 
</form>
  </div>