php - 如果连续少于 3 个，则动态将 bootstrap 更改为中心

Question

目前我有三个 col-md-4 列，每个列显示一个图像。如果用户只上传了 1 或 2 张图片，它会像往常一样 float 内容，但会浪费第三张图片的空间。

是否可以使用 CSS 将 1-2 列居中，直到添加第 3 列？

    <div class="container>

     <div class="row">

        <div class="col-md-4 image-1">
         <img>
        </div>

        <div class="col-md-4 image-2">
         <img>
        </div>

        <div class="col-md-4 image-3">
         <img>
        </div>

     </div>

    </div>

Answer 1

我认为您不应将左对齐元素(当 3 个或更多)与居中对齐元素混合使用。当一组 2 个元素跟随一组 4 或 5 个元素时会发生什么？

如果您希望它们全部居中，只需将自定义类(在我的例子中为 .centerRows)添加到容器并使用下面的 CSS:

.centerRows>.row {
  text-align: center;
}
.centerRows>.row>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

如果您只想将具有 2 个或更少 child 的行居中，在通过 js 计算他们的 child 之后，将自定义类添加到您想要居中的行。概念证明:

$('.container>.row').each(function(){
  if($(this).children().size() < 3) $(this).addClass('centerMe');
})

.centerMe {
  text-align: center;
}
.centerMe>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>