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

Posted 2023-03-06

【中文标题】响应式布局中的动态列数和行数

【英文标题】：Dynamic number of columns and rows in a responsive layout

【发布时间】：2015-02-25 19:26:03

【问题描述】：

假设我们有以下标记：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-md-4 col-lg-3">
            <img src="..."  />
        </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 hacks 的摆布。

有没有合适的方法来做到这一点？

编辑：有一种方法可以做到这一点，但它也不是首选方法：输出具有不同列数的多个网格并使用媒体查询显示它们中的每一个。虽然这是一种可能性，但我绝不会这样做，因为它会产生错误的标记并且它也可能对 SEO 不利。

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

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

编辑：3： 以下是布局在不同屏幕尺寸上的表现：

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

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

上面的 CSS 是正确的方法吗？我还能如何做到这一点？

【问题讨论】：

什么不是语义？使用多个DIV？也许您想要实现的目标的视觉表示可以让我们更好地了解视觉效果和您遇到的相关问题。

什么不清楚？我已经详细描述了这个问题。

假设我已经阅读了您想要正确实现的目标，那么您所做的事情要比它需要的复杂得多。

很难理解您想要实现的目标。您能否包含一个视觉效果，说明您希望它在不同的屏幕尺寸上如何表现？

正确。如果您将可见/隐藏的辅助类与底部边框样式的 div 结合起来，它应该可以工作。我会写出来并粘贴一些代码。

【参考方案1】：

使用 .hidden/.visible 辅助类与 .clearfix 与分隔符/边框底部样式相结合。它变得有点复杂，因为您将每 2、3 和 4 个 .col 使用不同的分隔符 div，然后更因为您将每 4、6、12 等（共同分母相遇的地方）组合它们。

这是一个演示：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>

祝你好运！