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

时间:2019-01-28 22:24:48

标签: twitter-bootstrap

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

2 个答案:

答案 0 :(得分:1)

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

<div class="container">

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

答案 1 :(得分:0)

不知道为什么使用widthcol-*类定义宽度,因为这首先是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>