Html 动态中心div引导

我正在尝试创建一个响应div列表

---

如果我正确理解了问题，将

col-sm-6

和

col-xs-6

更改为

-4

应该会给你带来你想要的行为。如果没有，请随意评论这个答案，并解释您希望它看起来如何

<div class="container">
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
    <a href="#">
      <img src="https://dummyimage.com/250x250/000/fff">
    </a>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
    <a href="#">
      <img src="https://dummyimage.com/250x250/000/fff">
    </a>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
    <a href="#">
      <img src="https://dummyimage.com/250x250/000/fff">
    </a>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4">
    <a href="#">
      <img src="https://dummyimage.com/250x250/000/fff">
    </a>
  </div>
</div>

---

尝试将flexbox用于

.container

。使用“对齐内容：居中”时，它将在“行”内居中

.container{
显示器：flex；
证明内容：中心；
}

---

如果您可以升级到Boostrap 4，您可以这样做：

.col{背景：#555；边框：2px实心#fff；颜色：#fff；}
第1栏
第2栏
第3栏
第4栏

您可以像这样使用

flex-container

和

flex-wrap

.my container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}

---

要进行测试，请尝试删除列

对于所有决议：

.col-xs-6：第一个孩子：第n个最后一个孩子（3），
.col-xs-6:第一个孩子：第n个最后一个孩子（3）~.col-xs-6{
宽度：33.3%；
}

我也有同样的问题。我在div中添加容器流体类的简单事情

<div class="container-fluid">
 <div class="col-lg-6">
 </div>
  <div class="col-lg-3">
   </div>
    <div class="col-lg-3">
    </div>
    </div>

---

试试这个，它可能会解决你的问题。

居中你的意思是这三个将在同一行并居中？@Swellar是的，这就是我的意思你说的“动态”。您是在服务器上还是使用jQuery添加或删除div？如果是这样，您可能需要根据显示的div数添加适当的类。您应该能够修改@goose的答案。如果只有两个怎么办？那么它们将占据行的50%，并保持居中。当只有2个功能时，您还需要其他功能吗？