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：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果您需要使用它来使用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;
}

Example bootply

Answer 2

你可以使用flex。

＆＃13;

var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
     $('.flex').css('justify-content','space-between');
}
else{
     $('.flex').css('justify-content','space-around');
}

＆＃13;

.flex{
  width: 300px;
  flex:1;
  display: flex;
  flex-wrap: wrap;
}
.flex-item{
  width:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class='flex-item'>
    A
  </div>
  <div class='flex-item'>
    B
  </div>
  <div class='flex-item'>
    C
  </div>
  <div class='flex-item'>
    D
  </div>
  <div class='flex-item'>
    E
  </div>
  <div class='flex-item'>
    F
  </div>
  <div class='flex-item'>
    G
  </div>
   <div class='flex-item'>
    H
  </div>
 
</div>

＆＃13;

Answer 3

你可以做的是，如果在动态生成它时剩下2或1，并使用col-x-push-x推送那么多列

，那就可以解决了。

Fiddle with two Remaining Image

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4 col-md-push-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
  </div>
</div>

Fiddle with One Remaining Image

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4 col-md-push-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
  </div>
</div>

Answer 4

您可以使用flexbox接近所需的布局。

将justify-content: center添加到row。如果项目本身在一行中，这将使项目居中。

同时定位row中的倒数第二项。将margin-right设置为自动。在只有两个项目的行中，这会将最后一项对齐。

示例：

＆＃13;

body {
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  width: 33.3333%;
}

.col:nth-last-child(2) {
  margin-right: auto;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

＆＃13;

<div class="row">
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>

</div>
<br><br>
<div class="row">
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>


</div>

＆＃13;

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

4 个答案: