Question

我试图将三行三个图像居中：http://secondary.makeminechocolate.org/young-kids

其中一行的代码是：

<div class="container text-center">

  <!-- ...bunch of other code here.... -->

  <div class="row col-sm-12 margin-bottom-xs col-centered">
    <div>
      <div class="col-xs-12 col-sm-4 margin-bottom-xs regRabbitB-sm">
        <img class="img-responsive" src="/sites/default/files/2018-02/Lang.png" />
      </div>

      <div class="col-xs-12 col-sm-3 boyRabbit-xs boyRabbit-sm">
        <img alt="Rabbit On Boy" class="img-responsive"  src="/sites/default/files/2018-02/Exelby.png" />
      </div>

      <div class="col-xs-12 col-sm-4 margin-bottom-xs margin-left5-xs regRabbitR-sm">
        <img alt="Rabbit and Child in Box" class="img-responsive" src="/sites/default/files/2018-02/West.png" />
      </div>
    </div> <!-- centered div -->
  </div> <!-- row -->

  <!-- ...more code here.... -->

</div> <!-- container -->

这是我自己的中心课的风格：

.col-centered {
  float: none;
  margin: auto;
  max-width: auto;
}

我知道这很简单，但我尝试创建自己的中心课，只使用text-center，但没有任何作用。

Answer 1

您正在使用col-*类覆盖bootstrap .regRabbitR-sm .boyRabbit-sm类。尝试将其移至<img>标记。此外，图像将以text-center类为中心，与其各自的父级相关。您不应该使用col-*自定义边距类，因为它会使响应网格混乱。

例如：

<div class="col-xs-12 col-sm-3 text-center">
<img alt="Rabbit On Boy" class="boyRabbit-xs boyRabbit-sm img-responsive"  src="/sites/default/files/2018-02/Exelby.png" />
</div>

如果您希望它们间隔均匀，可以尝试使用display: flex;

<div class="flex-img-wrapper">
<img href="img1" />
<img href="img2" />
<img href="img3" />
</div>

.flex-img-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Answer 2

始终确保总列数加起来为12.另外，如果您希望中间图像占据列宽的100％，则需要在Bootstrap 3中为其创建一个辅助类。

＆＃13;

.w-100 {
  width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row margin-bottom-xs">
    <div>
      <div class="col-xs-12 col-sm-4 text-center margin-bottom-xs regRabbitB-sm">
        <img alt="Rabbit with Child" class="w-100 img-responsive" src="http://via.placeholder.com/300x225" />
      </div>

      <div class="col-xs-12 col-sm-4 boyRabbit-xs boyRabbit-sm">
        <img alt="Rabbit On Boy" class="w-100 img-responsive" src="http://via.placeholder.com/169x225" />
      </div>

      <div class="col-xs-12 col-sm-4 margin-bottom-xs margin-left5-xs regRabbitR-sm">
        <img alt="Rabbit and Child in Box" class="w-100 img-responsive" src="http://via.placeholder.com/300x225" />
      </div>
    </div>
    <!-- centered div -->
  </div>
</div>

＆＃13;

Bootstrap 3无法居中div

2 个答案: