时间戳

首页 > 解决方案 > 具有列状结构的 HTML 页面的响应性

html - 具有列状结构的 HTML 页面的响应性

问题描述

我正在寻找一种技术来处理 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 中。另一方面，当列并排出现时，如果我希望相应的项目出现在相同的高度，我需要将它们分成行而不是列。

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

有任何想法吗？谢谢阿里

标签： htmlcsstwitter-bootstrap-3flexboxresponsive-design

解决方案

如果您使用 BS3 但愿意在flex一边使用，您可以考虑grid在 mediaquerie 和自定义类中代替：

你的评论我的反应是：

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

推荐阅读