Question

我的行占用了大量房地产，没有我提供的CSS样式。我喜欢那部分。
我的列div具有宽度，因此在大显示屏上它们不会拉伸。我也喜欢那个。
我希望这些div列位于div行的中心。在开始应用自己的样式进行此操作之前，我想知道是否有Bootstrap方法来实现它。我在网上找到了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>

Answer 1

如果要将内容放在一行容器中，请尝试

<div class="container">

    <div class="row justify-content-center">
       <!-- content of row  -->
    </div>
</div>

Answer 2

不知道为什么使用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>

如何在Bootstrap的div行中居中放置div列大小？

2 个答案: