引导5排对齐按钮

Question

我试图让我的网页上的按钮在页面中间并排排列，这是我尝试过的2个引导5类，它们不是我希望它们看起来的那样：

1. https://gyazo.com/c23f2eade4614380aec547b11e61387a
2. https://gyazo.com/e40a678b02c9f641f746b1cfbe83d03f

作为参考，有些问题将有多个按钮(最多10：https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a)的答案，我也希望它们在一行中间隔相等，比如：https://gyazo.com/ca1ab61aa7fef54f1cf1a099cb56a5e0

我不确定这是否改变了什么，但是在javascript中使用for循环添加了按钮。

任何建议都会很感激的，我一直都很执着于此

Answer 1

以class="btn-group“为例，我取得了成功：

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

在：groups.asp中查看更多详细信息

Answer 2

在css文件夹中添加一个填充所有按钮的元素，样式为div，具有以下样式：

{ 
  display:flex; align-item:center;
  justify-content: space-around;
}

如果他们是许多按钮，让display: flex;，成为display: inline-flex;。

Answer 3

默认情况下，您不需要任何类，它们会对齐一行，我们可以使用容器上的文本中心使它们水平地居中。

​

<script src="https://unpkg.com/@popperjs/core@2.11.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center">
  <button class="btn btn-primary" type="submit">Button</button>
  <button class="btn btn-primary" type="submit">Button</button>
  <button class="btn btn-primary" type="submit">Button</button>
</div>

​