使一系列引导按钮居中

Question

我正在尝试使一组不同长度的按钮居中，以便每个按钮的中间与其下方的按钮内联。我尝试了多种解决方案，认为justify-content-around 是关键，但它不起作用。我也尝试过 mx-auto，但它似乎不是解决方案。

<div class="d-flex justify-content-around">          
      <a href="/" class="btn btn-info mx-auto btn-sm" role="button">these words</a>
      <a href="/" class="btn btn-info mx-auto btn-sm" role="button">are</a>
        <a href="/" class="btn btn-info mx-auto btn-sm" role="button">different lengths unfortunately</a>
  </div>
  <div class="d-flex justify-content-around">
      <a href="/" class="btn btn-info mx-auto btn-sm" role="button">aa</a>
      <a href="/" class="btn btn-info mx-auto btn-sm" role="button">bbb</a>
        <a href="/" class="btn btn-info mx-auto btn-sm" role="button">cccccccc</a>
  </div>

Can you recommend a fix as well as the "bootstrap-y" way to do this for bootstrap 4.5?

Answer 1

最好的方法是使用网格。您有 2 行，每行 3 列。要将每列的内容居中使用.col.d-flex.justify-content-center

<div class="row">
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">these words</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">are</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">different lengths unfortunately</a>
  </div>
</div>

<div class="row">
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">aa</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">bbb</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">cccccccc</a>
  </div>
</div>