Bootstrap 如果最后一个元素是一行中的最后一个且单独的元素，则将其居中

jobtbby3 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(7)|浏览(131)

我得到了一个bootstrap网格，其中的内容是动态加载的。如果最后一个元素是单独在行中，它应该居中。
我想要的：

A   B
C   D
E   F
  G

HTML程式码：
第一次
我得到的：

A   B
C   D
E   F
G

我尝试使用css选择器:nth-last-of-type()，但是使用这个选择器，每个“最后一个元素”都获得了属性。
有人知道怎么做吗？我希望我能用一种你能理解的方式来解释它。

twitter-bootstrap

来源：https://stackoverflow.com/questions/47206315/center-last-element-if-its-last-and-alone-in-a-row

7条答案

按热度按时间

gg0vcinb1#

很简单，您可以使用display:flex和text-align: center。
第一个

赞(0）回复(0）举报 2022-12-08

pb3s4cty2#

将last-child和nth-child结合起来就可以了，这样你就可以把你的元素放在中间了。
https://codepen.io/anon/pen/zPNWxK

<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%); 
}

当你真正这样做的时候，当然不要使用div作为实际的选择器

赞(0）回复(0）举报 2022-12-08

vuv7lop33#

您可以将：nth-child（odd）和：last-child结合起来，检查元素本身是否是行中的最后一个元素，如下所示：
CSS：

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

Here's a Codepen。

赞(0）回复(0）举报 2022-12-08

cbwuti444#

如果你确定最后一个是奇数（所以它将单独在该行中），你可以使用bootstrap offset system并将其写为：

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

参考：引导偏移

赞(0）回复(0）举报 2022-12-08

rn0zuynd5#

只是text-align: center的last-child的div，如下所示。
以整页模式打开代码段，查看所需的结果
第一个

赞(0）回复(0）举报 2022-12-08

cwtwac6a6#

事情很简单：