在bootsrap 4中将两列居中

Question

我有两列，我想将它们居中，在boostrap 3中，使用推入和推入boostrap 4可以实现它的不同，我无法弄清。

这是我所拥有的。

 <div class="col-sm bg-success">1 </div>
      <div class="col-sm bg-warning">2 </div>
    </div>  

我希望这两个div像这样居中。

要获得想要的结果，我需要更改什么？

Answer 1

您可以使用offset-类来获取所需的内容。

<div class="container">
  <div class="row">
      <div class="col-sm-4 offset-sm-2 bg-success">
          1
      </div>
      <div class="col-sm-4 bg-warning">
          2
      </div>
  </div>  
</div>

提琴：http://jsfiddle.net/aq9Laaew/72786/

Answer 2

将它们添加到具有row的{​​{1}}

justify-content-center

（可选）在第一列的类中添加<div class="row justify-content-center"> <div class="col-4 bg-success">1 </div> <div class="col-4 bg-warning">2 </div> </div> ，其中mr-*表示要在它们之间添加的空间。

https://codepen.io/tentacular261/pen/XYLKMw