Question

在满足这些要求的情况下，如何使按钮居中？

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

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

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

Answer 1

解决方案：创建一个旧式包装+ 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

Answer 2

取决于您想要的布局和断点。...

您可以使用btn-block作为标准按钮。 Btn-block当然会填充可用的宽度并使按钮文本居中。

然后，您可以通过将每个btn块放在行中的列中来限制它们。然后，当它们折断并堆叠时，它们会扩展/收缩为他们可用的新宽度。

这是什么意思？我已经成功使用了它并取得了良好的效果。

Bootstrap 4-中心按钮

2 个答案: