Блог

В настоящее время у меня есть этот код:

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

добавить display: flex в button-box div.

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