css - 如何在 Bootstrap 中将 col-xs-12 居中？

Question

当屏幕为 sm 或 xs 时，我无法在 bootstrap 中将列居中。

fiddle 在这里 https://jsfiddle.net/iggyfiddle/DTcHh/34028/ .这就是我要说的:

当屏幕很大(或中等)时，我没有问题。它出现居中。

当屏幕开始变小时，它开始变得引人注目。如果你注意到，整个列堆栈向左倾斜，在右侧留下一些空间(我添加了红色 bg 以强调。当 bg 是白色时很难分辨)。

当屏幕为 xs 时，它更加明显。请注意，一切都向左倾斜，在右侧留下很多空间。

我看到一篇解决类似问题的热门 SO 帖子 here .解决方案建议 float: none; margin: 0 auto;，我做了 - 但它没有做任何事情。我也尝试添加 center-block 类，但结果仍然没有。

我需要做什么才能使我的列居中？我的目标是在 xs 屏幕上，我想堆叠一列。当它在 sm 屏幕上时，我想要并排堆叠两列。任何更大的东西都应该有 4 个相邻的列。

Answer 1

这是因为您在 .card 上使用了宽度。将 margin: 0 auto 添加到 .card 类将解决您的问题。