Bootstrap 连续 5 个对齐按钮答案

【问题标题】：Bootstrap 5 aligning buttons in a rowBootstrap 连续 5 个对齐按钮
【发布时间】：2021-12-06 00:44:56
【问题描述】：

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

作为参考，有些问题会有多个按钮的答案（最多 10 个：https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a），我还希望它们连续均匀分布，如下所示：https://gyazo.com/ca1ab61aa7fef54f1cf1a099cb56a5e0

我不确定这是否会改变任何东西，但按钮是使用 javascript 中的 for 循环添加的。

任何提示将不胜感激，我一直坚持这一点

【问题讨论】：

标签： javascript html css bootstrap-5

【解决方案1】：

您可以将按钮包装在 flex 中，然后使用自定义 css 或 Bootstrap Grid System 控制 flex-div 的宽度。 JSFiddle

<div class="row">
  <div class="col-6 mx-auto">
    <div class="d-flex align-items-center justify-content-evenly">
      <button class="btn btn-primary">Button 1</button>
      <button class="btn btn-primary">Button 2</button>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在示例中使用flex CSS，counter 仅用于为按钮编号，不是必需的。

.center {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  counter-reset: button;
}

.btn::before {
  counter-increment: button;
  content: counter(button);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
  <section class='row'>
    <div class='col center'>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
    </div>
  </section>

【讨论】：

嗯，发生了一些奇怪的事情，看起来像这样：gyazo.com/cc7dc6065c2575a0ff65ad5d84115f0f
注意，这就是我的css中的centerAButtons：.centerAButtons { display: flex;弹性流：行 nowrap； justify-content: 之间的空格； }
我错过了什么@zer00ne
justify-content: space-around 或center 并添加button {margin:TOP/BOTTOMpx LEFT/RIGHTpx} LEFT/RIGHT 值将是<button>s 之间的空格。

【解决方案3】：

在您的 css 文件夹中添加一个填充所有按钮的元素，使用以下样式设置该 div 的样式：

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

如果按钮很多，则将display: flex; 设为display: inline-flex;。

【讨论】：

【解决方案4】：

默认情况下你不需要任何类，它们会在一行中对齐，我们可以在容器上使用 text-center 使它们水平居中

<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>

【讨论】：

嗯，尝试这样做时，按钮不会居中：gyazo.com/dd5a59ac4739da4e41b4917cb8b86f20
@Tester321 你可以使用容器上的 text-center 来使我更新代码的按钮居中

【解决方案5】：

您不需要引导程序。您可以使用 flex 布局轻松进行对齐。 Bootstrap 只能用于样式元素。

阅读全文： a-guide-to-flexbox

.container{
  margin-top:20px;
  display: flex;
}

.container{
  display: flex;
}
.cl-1{
  justify-content: center;
}
.cl-1 button{
  margin-right: 20px;
}
.cl-2{
  justify-content: space-between;
}
.cl-3{
  justify-content: space-evenly;
}
.cl-4{
  justify-content: space-around;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Center align</h2>
<div class="container text-center cl-1">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-beetween</h2>
<div class="container text-center cl-2">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-evenly</h2>
<div class="container text-center cl-3">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-around</h2>
<div class="container text-center cl-4">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

【讨论】：