Bootstrap 5 个对齐按钮连续

Question

我试图让网页上的按钮并排在页面中间，这些是我尝试过的 2 个 bootstrap 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>

查看更多详细信息： https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

Answer 2

您可以将按钮包装在

flex

中，然后使用自定义 css 或 Bootstrap 网格系统控制 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>

Answer 3

在示例中使用

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>

Answer 4

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

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

如果有很多按钮，则将

display: flex;

设为

display: inline-flex;

。

Answer 5

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

<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 6

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

阅读更多： 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/[email protected]/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>

Answer 7

如果您想要一排按钮，但它们之间有一些空间（与使用

.btn-group

得到的不同），那么您可以在周围的 div 中使用

d-flex

和

gap-[number]

类。这适用于 Bootstrap v5。

<div class="d-flex gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
</div>