使用Bootstrap动态并排放置按钮？答案

【问题标题】：Place buttons side by side dynamically with Bootstrap?使用Bootstrap动态并排放置按钮？
【发布时间】：2021-02-13 12:02:54
【问题描述】：

目前我有这个代码：

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

虽然如果我只想显示两个按钮，这会有所帮助，但是如何动态地使按钮基本上占据每个按钮容器宽度的 50%？

比如我在上面的代码中放了4个a标签，

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

结果是这样的，

<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>
<div class="button-box col-lg-12">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>

但是在一个容器中（按钮框）？

我使用的额外 CSS：

.button-box {
  text-align:center;
  margin-top:20px;
 }

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

在button-box div 上添加display: flex。

.button-box {
  text-align: center;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  /* to wrap the button */
}

.button-wrapper {
  width: 50%;
  /* width of the button */
  padding: 0 5px;
  /* to add some spaces between buttons */
  margin-bottom: 10px;
  /* margin for button */
}

.btn-info {
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="button-box col-lg-12">
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">About Us</a>
  </div>
  <div class="button-wrapper">
    <a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
  </div>
</div>

【讨论】：