行显示块Bootstrap v4的中心内容

Question

我使用的是Bootstrap v4.3.1，但我确实更改了Bootstrap.min.css文件所有display:flex;都被display:block;替换

因为flex在firefox上的打印模式下无法正常工作。。无论如何，在更改这一行之后，任何行类都不能居中，即使我使用了justicecontentcenter。

我认为原因是行类是块而不是弹性的，所以当它被块时，我如何将行的内容居中？

<div class="container">
<div class="row">
<div class="col-sm">
1
</div>
<div class="col-sm">
2
</div>
<div class="col-sm">
3
</div>
</div>
</div>

更新#1只是为了清楚地表明，我使用编辑后的引导如下

<link rel="stylesheet" media="print" href="'css/Editedbootstrap.css" />

所以它只在打印模式下，请参阅下面的帖子，以获得更多关于我面临的问题类型的信息

Answer 1

在发布答案之前，我警告您，不能直接更改bootstrap.min.css。

如果不想使用flexbox，请使用Bootstrap 3

对于像.row这样的任何块居中，您可以使用text-center类或使用CSS。

.row {
text-align: center;
}

<div class="container">
<div class="row">
<div class="col-sm">
1
</div>
<div class="col-sm">
2
</div>
<div class="col-sm">
3
</div>
</div>
</div>

Answer 2

要将div(块元素(定位在中心，技术是使左右边距都自动，然后给div一个宽度：

.center-div {
margin-left: auto;
margin-right: auto;
width: 300px;
}