网格中最后一个元素的行为

Question

我有一个动态生成图像的引导网格.

如果最后一个元素在行中是唯一的,那么它应该居中.如果行中有两个元素,则第二个元素应该向右浮动.

这就是我要的:

行中的两个元素:

A   B   D
E   F   G
H       I

行中的一个元素:

A   B   D
E   F   G
    H    

HTML代码:

<div class="row">
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>  
</div>

这就是我得到的:

行中的两个元素:

A   B   D
E   F   G
H   I

行中的一个元素:

A   B   D
E   F   G
H  

我尝试使用:last-child:nth-child(odd)和:last-child:nth-child(even),但在第一行中第一个元素是奇数,在第二行中第一个元素是偶数,在第三行中第一个元素是奇数,依此类推.

请注意,内容大小会有所不同.

Answer 1

您可以混合使用nth-child和last-child:

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-md-6 {
  width: 33.3333%;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

.col-md-6:last-child:nth-child(3n+2) {
  /* push second child to right if last child */
  margin-left: auto;
  border-color: red;
}

.col-md-6:last-child:nth-child(3n+1) {
  /* push first child to middle if last child */
  margin: auto;
  border-color: red;
}

<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
  <div class="col-md-6">
    8
  </div>
</div><br>
<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
</div>

如果您需要使用它来使用bootstrap 3而不是4,那么您可以使用它

.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
  /* push second child to right if last child */
  margin-left: 33.333333%;
  border: 1px solid red;
}

示例bootply