在引导程序 4 中居中两列答案

【问题标题】：Center two columns in bootsrap 4在引导程序 4 中居中两列
【发布时间】：2018-12-14 12:08:14
【问题描述】：

我有两列，我想将它们居中，在 boostrap 3 中使用推和拉在 boostrap 4 中很简单，但我无法弄清楚。

这就是我所拥有的。

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

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

我需要改变什么才能得到我想要的结果？

【问题讨论】：

这两列占一行的百分比是多少？使用引导程序 4 将它们居中的方法有很多。您可以使用 max-width 和 css 类 mx-auto 将它们包装在一个 div 中：getbootstrap.com/docs/4.1/utilities/spacing/…
两者都应该有 col-sm-4

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

将它们添加到具有justify-content-center 的row

<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

【讨论】：

感谢 mical 在桌面看起来像我预期的那样，但在像这样的移动 loks ibb.co/g3dUGd 中，我需要更改什么才能响应，正如您在此处看到的第二个表单被推向左，我想要作为日历居中？
可以给margin类mr-*-*添加断点，其中第一个*是xs、sm、md、lg，第二个*是你选择的空间量. mr-sm-1我觉得应该给你你想要的。

【解决方案2】：

您可以使用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/

【讨论】：

感谢 David 在桌面上看起来像我预期的那样，但在像这样 ibb.co/g3dUGd 这样的移动 loks 中，我需要更改什么才能响应，正如您在此处看到的第二个表单被推向左，我想要作为日历居中？
看你的照片很难猜出来。有很多因素会导致这个问题。是否可以发布 HTML 结构以及您应用的其他样式？
是的，这就是它的小提琴：jsfiddle.net/Mwanitete/w69jfyv1/2
我只能从你的小提琴中告诉你的 HTML 结构和 scss 文件。它没有运行。无论如何，尝试从about-booking css 类中取出width: 100%;。 row 类及其列上有边距。将行的宽度设置为 100%，并将其推到左侧，忽略左边距。
嗨，大卫，你能检查一下这个帖子吗？ stackoverflow.com/questions/51210526/…