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>
答案 0 :(得分:1)
如果要将内容放在一行容器中,请尝试
<div class="container">
<div class="row justify-content-center">
<!-- content of row -->
</div>
</div>
答案 1 :(得分:0)
不知道为什么使用width
为col-*
类定义宽度,因为这首先是col-*
类的重点。但是,如果您使用的是 Bootstrap 4 ,则可以将justify-content-center
添加到row
div中,它将使内容居中(如果有可用空间)。
您可以为较大的设备指定较小的列,例如如果将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>