引导按钮

Question

我正在尝试制作三个以标题为中心的平行方形按钮。像这样的

                                      My title

Square button-1                    square button-2             square button-3

我的代码如下::

<div class="col-md-12 pt-md-5 text-center">
  <p>My title</p>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
     <div>
        <button class="btn btn-sq-lg btn-info">button-1</button>
     </div>
     <div >
      <button class="btn btn-sq-lg btn-info">button-2</button>
     </div>
     <div>
      <button class="btn btn-sq-lg btn-info">button3</button>
    </div>
   </div>
 </div>
</div>

.btn-sq-lg {
    width: 150px !important;
    height: 150px !important;
  }

我得到的输出是三个垂直的，没有任何空格。但我想要三个等间距的平行方形按钮

我该怎么做？ 另外，如何制作带有白色和黑色文本的按钮以及带有白色的标题并增加字体大小？

刚刚将按钮设置为信息，但想要一个带有黑色文本的白色背景

Answer 1

col-xs-** 在 v4 中已替换为 col-**。您需要将每个button 与col-4 分开

.btn-sq-lg {
  width: 150px !important;
  height: 150px !important;
  background: #ffff!important;
  color: black!important
}

.square {
  text-align: center
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="p-5 w-100 text-center">My title</p>

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="square">
        <button class="btn btn-sq-lg btn-info ">button-1</button>
      </div>
    </div>
    <div class="col-4">
      <div class="square">
        <button class="btn btn-sq-lg btn-info">button-2</button>
      </div>
    </div>
    <div class="col-4">
      <div class="square">
        <button class="btn btn-sq-lg btn-info">button3</button>
      </div>
    </div>
  </div>
</div>

Answer 2

使用justify-content-between 到row 并删除带有col-xs-4 的div（xs 在 bootstrap 4 中不存在）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-12 pt-md-5 text-center">
  <p>My title</p>
</div>
<div class="container">
  <div class="row justify-content-between">
    <div>
      <button class="btn btn-sq-lg btn-info">button-1</button>
    </div>
    <div>
      <button class="btn btn-sq-lg btn-info">button-2</button>
    </div>
    <div>
      <button class="btn btn-sq-lg btn-info">button3</button>

    </div>
  </div>
</div>