Question

目前，我有三个col-md-4列，每列显示一张图片。如果用户只说上传了1或2张图片，则会将内容浮动为正常情况，但会让第三张图片留下浪费的空间。

是否可以使用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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您只想将行居中于2个或更少的子项，请在通过js计算子项后，将自定义类添加到您想要居中的行中。概念证明：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

恕我直言，你不能用css做这件事。可以办到使用JS。像这样：

if($('.image-3').length === 0){
    $('.row').find('div').RemoveClass('col-md-4');
    $('.row').find('div').AddClass('col-md-6');
}

但是，如果您要为算法添加更多语句，我的意思是＆＃34;如果只有一个div，或者只有4个（下一行有一个）＆＃34; 你必须得到更复杂的代码。

如果连续少于3，则动态地将引导程序更改为中心

2 个答案: