text-center，center-box但在我的情况下似乎都不起作用。<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
例子：
<div class="container" style="border: 2px #000 solid;">
<div class="row text-center center-box" style="text-align: center; border: 3px red solid">
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
</div>
</div>
红色边框显示 div 行拉伸得很好。div 列的宽度限制为大约 150 像素。它们保持与左侧对齐。我们可以使用 Bootstrap 技巧将它们居中吗？
由 sachMati 推荐但对我不起作用
<div class="container" style="border: 2px #000 solid;">
<div class="row justify-content-center" style="text-align: center; border: 3px red solid;">
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
</div>
</div>
不知道为什么width要为col-*类定义宽度，因为这col-*首先是类的重点。但是，如果您使用的是Bootstrap 4，您只需将justify-content-center加到rowdiv 中，它就会将其内容居中（如果它有可用空间）。
您可以为较大的设备指定一个较小的列，例如如果您col-sm-4用于小屏幕，则可以col-lg-2用于较大的屏幕，避免设置特定的宽度，如果这当然是您需要的外观，因为设置显式会width破坏列类。
全屏试试这个
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="border: 2px #000 solid;">
<div class="row justify-content-center" style="text-align: center; border: 3px red solid">
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
</div>
</div>对于Bootstrap 3，您可以尝试添加 flex 行为，它的工作原理几乎相同；或者您可以使用这些offset-*类坚持使用 Bootstrap 。
.flex {
display: flex;
justify-content: center;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="border: 2px #000 solid;">
<div class="row flex" style="text-align: center; border: 3px red solid">
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
<div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
</div>
</div>
<!-- Offset -->
<div class="container" style="border: 2px #000 solid; margin-top: 20px">
<div class="row" style="text-align: center; border: 3px red solid">
<div class="col-xs-2 col-xs-offset-3" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
<div class="col-xs-2" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
<div class="col-xs-2" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句