twitter-bootstrap - Bootstrap 4 - 中心按钮

Question

鉴于这些要求，如何使按钮居中？

1. 按钮宽度是可变的。
2. 所有按钮宽度都需要设置为最大宽度按钮（等宽）。
3. 按钮必须垂直堆叠。

这可行，但我无法将它们居中。

 <div class="d-inline-flex flex-column"> 
  <button type="button">Width1</button>
  <button type="button">Width2</button> 
  <button type="button">Width3</button> 
 </div>

标签： twitter-bootstrapcssbootstrap-4

Answer 1

解决方案：创建一个old school wrapper + btn-group-vertical

<div class="d-block mx-auto text-center">
  <div class="btn-group-vertical">
    <button type="button">Width1</button>
    <button type="button">Width2</button> 
    <button type="button">Width3</button>
  </div>
</div>

信用：https ://codepen.io/yongchuc/pen/mrNVPG