在bootstrap中使一组列居中并具有响应性和等高性？

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

<div class="d-flex justify-content-center">
  <div class="p-2">Column 1</div>
  <div class="p-2">Column 2</div>
  <div class="p-2">Column 3</div>
</div>

<div class="custom-container">
  <div class="custom-row">
    <div class="custom-column">Column 1</div>
    <div class="custom-column">Column 2</div>
    <div class="custom-column">Column 3</div>
  </div>
</div>

.custom-container {
  display: flex;
  justify-content: center;
}

.custom-row {
  display: flex;
}

.custom-column {
  flex: 1;
}