具有列状结构的 HTML 页面的响应性答案

【问题标题】：Responsivity in HTML pages with column-like structures具有列状结构的 HTML 页面的响应性
【发布时间】：2021-02-19 19:26:00
【问题描述】：

我正在寻找一种技术来处理 html 页面中的响应性，这些页面具有包含多个项目的列状结构。

这是一个例子： Codepen

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="width:200;">
  <div class="col-sm-6">
    <div class="item">
      First
      <br><br>
    </div>
    <div class="item">
      Second Second Second Second Second Second Second
      <br><br>
    </div>
    <div class="item">
      Third<br><br>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="item">
      First First First First First<br><br>
    </div>
    <div class="item">
      Second<br><br>
    </div>
    <div class="item">
      Third<br><br>
    </div>
  </div>
</div>

我希望它看起来像这样：

每个“项目”的高度需要根据其文本长度和浏览器窗口宽度动态增长和缩小，同时与另一列保持对齐。

我还需要当屏幕足够窄时，右栏应该移动到左栏下方。

我的问题是，对于 Bootstrap，我似乎需要将每一列放入一个单独的 div 中。另一方面，当列并排出现时，如果我希望相应的项目出现在相同的高度，我需要将它们分成行而不是列。

附言。我尝试了 display:flex 但找不到可行的方法。

有什么想法吗？谢谢阿里

【问题讨论】：

你需要一个可以包裹 col 元素的单行。然后使用订单类在较小的屏幕上重新排序，直到最小的断点达到丢弃顺序并让它们堆叠。 Bs4 有内置的类。（现在从手机上，我可以做一个例子或在几个小时内修复你的尝试）除非其他人向你展示。 Bs4 已经使用了 flex ;)
感谢 G-Cyrillus。 Flex 和 Bs3 可以做到这一点吗？这是一个完全使用 BootStrap3 构建的大型网站，目前还不能升级到 Bs4。
使用 bs3 时，您将不需要命令来帮助您，但 grid 可以与自定义类一起使用。
我发布了一个使用 bs3 和自定义类的可能示例

标签： html css twitter-bootstrap-3 flexbox responsive-design

【解决方案1】：

Bootstrap Grid 布局本质上已经是动态的，因此您不需要设置行宽的样式属性。

要使右列在移动视图中位于左列下方，请使用移动视图的引导网格。因此，只需为每个列 div 元素添加移动视图网格布局类名称即可。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6 col-xs-12">
    <div class="item">
      First
      <br><br>
    </div>
    <div class="item">
      Second Second Second Second Second Second Second
      <br><br>
    </div>
    <div class="item">
      Third<br><br>
    </div>
  </div>
  <div class="col-sm-6 col-xs-12">
    <div class="item">
      First First First First First<br><br>
    </div>
    <div class="item">
      Second<br><br>
    </div>
    <div class="item">
      Third<br><br>
    </div>
  </div>
</div>

更多信息请访问Visit Here。

【讨论】：

【解决方案2】：

如果您使用 BS3 但愿意在一边使用flex，您可以考虑在媒体查询和自定义类中使用grid：

我对你的评论做出反应：

感谢 G-Cyrillus。 Flex 和 Bs3 可以做到这一点吗？这是一个完全使用 BootStrap3 构建的大型网站，目前无法升级到 Bs4。

BS3 的可能示例，在媒体查询中使用自定义类：

/*see us,  demo purpose */

.row div {
  box-shadow: 0 0 0 1px
}

/* custom class for the breakpoint where  rows are drawn into columns with matching rows */
@media screen and (max-width: 992px) and (min-width:768px) {
   :before,
   :after {
    grid-row: -1
  }
  .grid-md-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
  }
  .grid-md-2 [class^="col"] {
    width: 100%;
    grid-column: 1;
  }
  /*.grid-md-2 [class^="col"]:nth-child(3)~[class^="col"]*/
  /* update for a repeating pattern */
  .grid-md-2 [class^="col"]:nth-child(6n -2),
  .grid-md-2 [class^="col"]:nth-child(6n -1),
  .grid-md-2 [class^="col"]:nth-child(6n) {
    grid-column: 2;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row grid-md-2">
    <div class="col-sm-6 col-md-4 col-xs-12">
      First
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Second
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Third 
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      First First First
      <br><br> First First 
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
       Second<br>Second
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Third
    </div>
  </div>
</div>

【讨论】：