Javascript 如果最后一个元素为'；It’他是最后一个人了

我得到了一个引导网格，其中的内容是动态加载的。 如果行中只有最后一个元素，则应将其居中

我想要的是：

A   B
C   D
E   F
  G

HTML代码：

div{
边框：1px纯红；
}

A.
B
C
D
E
F
G

我想您正在寻找的是：最后一个子选择器

它很简单，您可以使用

显示：flex

和

文本对齐：居中

.flex容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}

1
2
3
4
5
6
7

如果您确定最后一个是奇数（因此它将单独在该行中），您可以使用引导偏移系统，并按如下方式编写：

<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-3"></div>

ref:

您可以将：n子元素（奇数）和：last子元素组合在一起，以检查元素本身是否是行中的最后一个，如下所示：

CSS:

HTML:

A.
B
C
D
E
F
G

---

.

将最后一个子元素和第n个子元素组合在一起会起作用，然后您可以将元素放在中心位置。本例使用左50%变换：translateX（-50%）

div{
高度：20px；
框大小：边框框；
背景颜色：蓝色；
边框：1px实心#fff；
}
分区：最后一个孩子：第n个孩子（奇数）{
背景色：红色；
左：50%；
转化：translateX（-50%）；
}

---

当您实际执行此操作时，当然不要将div用作实际选择器，只需将

文本对齐：居中
最后一个子项
div
，如下所示

以整页模式打开代码段以查看所需的结果


div:最后一个子级{
文本对齐：居中；
}

A.
B
C
D
E
F
G
是否要使用CSS或JavaScript执行此操作，如果只有一项，行为会是什么。它是居中还是向左浮动？您是否尝试过将“col-md-offset-3”类添加到模板的最后一个div中（正如我在回答中所建议的：P）？问题是：最后一个孩子将应用，无论最后一行中是否有一个或两个项。当然，如果这不是预期的行为，那么他只需要一些.row级别的唯一标识符class/ID，但我认为他的问题更多的是“如何判断此元素是否位于最后一行本身”。感谢您的帮助！这正是我想要的！很高兴我能帮你解决这个问题，谢谢！但我更喜欢mthomps答案，因为它的代码要少得多。
.row {
  width: 200px;
}
.col-md-6 {
  width: 50%;
  float: left;
  text-align: center;
}
.col-md-6:nth-child(odd):last-child {
  width: 100%;
}

<div class="row">
    <div class="col-md-6">a</div>
    <div class="col-md-6">b</div>
    <div class="col-md-6">c</div>
    <div class="col-md-6">d</div>
    <div class="col-md-6">e</div>
    <div class="col-md-6">f</div>
    <div class="col-md-6">g</div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

div {
  height:20px;
  box-sizing:border-box;
  background-color:blue;
  border:1px solid #fff;
}

div:last-child:nth-child(odd) {
  background-color:red;
  left:50%;
  transform:translateX(-50%); 
}