Php 响应布局中的动态列数和行数

假设我们有以下标记：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-md-4 col-lg-3">
            <img src="..." alt="..." />
        </div>
        <!--
            And, possibly, many more columns, 
            which are printed dynamically using
            the PHP's foreach loop
        -->
    </div>
</div>

---

上面的CSS是正确的方法吗？还有什么方法可以实现这一点呢？

使用

.hidden/.visible

辅助类与带有分隔符/边框底部样式的

.clearfix

组合。它变得有点复杂，因为您将每2、3和4次使用不同的除法器div

.col

，甚至更复杂，因为您将每4、6、12次组合它们（在公分母相交的地方）

下面是一个演示：

---

祝你好运

什么不是语义？使用多个div？也许通过视觉表现你正在努力实现的目标可以让我们更好地理解你的视觉效果和相关问题。还有什么不清楚的？我已经详细地描述了这个问题。假设我已经正确地阅读了您试图实现的目标，那么您将使问题变得比需要的复杂得多。很难理解您试图实现的目标。你能提供一个视觉效果，让它在不同的屏幕上表现出来吗。如果您将可见/隐藏的帮助器类与带有底部边框的div样式相结合，它应该可以工作。我会把它写出来并粘贴一些代码。

&:after {
   content: "";
   position: absolute;
   width: 420%;
   height: 1px;
   left: -160%;
   background-color: black;
}

<div class="row border">
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 2nd col -->
    <div class="visible-xs visible-sm clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 3rd col -->
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- and every 4th col -->
    <div class="visible-xs visible-sm visible-lg clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 6th col -->  
    <div class="visible-xs visible-sm clearfix divider"></div>
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
</div>