Question

假设我们有以下标记：

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

生成的标记只包含一行和多列。但是，这根本没有用：网格应该在超小屏幕上有2列，在中型屏幕上有3列，在大屏幕上有4列，每列的列都有一个单独的行。

但是，上述技术会产生非语义标记，只要有人决定将行与边框分开，就会出现问题

如果布局是静态的（无响应），我可以在foreach循环中的每个X图像（列）之后输出一个单独的行，但这显然不适用于响应式布局。

响应式方法似乎引入了比我最初预期更多的问题，因为服务器端无法区分用户是否已调整其浏览器窗口的大小（并相应地重新加载具有不同标记和行数的列）。为此制作AJAX调用会有点矫枉过正，我并不想使用JQuery根据屏幕宽度重新排列列，这让我受到令人讨厌的CSS黑客攻击。

有没有正确的方法来实现这个目标？

编辑：是一种方法，但它也不是首选方法：输出具有不同列数的多个网格，并使用媒体查询显示每个网格。虽然这是可能的，但我绝不想这样做，因为它会产生糟糕的标记和它也可能对SEO有害。

编辑2：这就是我想要实现的目标： Multiple rows

但是，我还需要动态地为每个屏幕尺寸执行此操作。

编辑：3：以下是布局在不同屏幕尺寸上的行为方式：

Different layout

这似乎很难在响应式布局上实现。 我需要单独行的原因是因为我希望每一行都有border-bottom CSS属性。我现在可以在网格的每个第n列使用:after CSS伪元素添加这样的分隔符，但是这样的分隔符的CSS非常难看（分隔符需要全宽，因为伪元素是专栏的一个孩子，我在这种情况下使用绝对定位）：

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

上面的CSS是正确的方法吗？我怎么能实现这个目标呢？

Answer 1

将.hidden/.visible辅助类与.clearfix结合使用，并使用分隔符/边框底部样式。这有点复杂，因为你会在第2，第3和第4 .col使用不同的分隔div，然后更多，因为你将每隔4,6,12等组合它们（共同的分母见面））。

这是一个DEMO：http://www.bootply.com/sEAH6qXHiI

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

祝你好运！

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

1 个答案: