我有一个动态生成图像的引导网格.
如果最后一个元素在行中是唯一的,那么它应该居中.
如果行中有两个元素,则第二个元素应该向右浮动.
这就是我要的：
行中的两个元素：
A B D E F G H I
行中的一个元素：
A B D
E F G
H
<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),但是在第一行中第一个元素是奇数,在第二行中第一个元素是偶数,在第三行第一个元素又是奇数,依此类推.
请注意,内容大小会有所不同.
解决方法
你可以使用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;
}
