HTML 具有列状结构的页面的响应度

Question

我正在寻找一种技术来处理 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>

我希望它看起来像这样：

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

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

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

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

有什么想法吗？谢谢阿里

Answer 1

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

要在移动视图中将右列置于左列下方，请使用移动视图的 bootstrap 网格。因此只需为每个列 div 元素添加移动视图网格布局 class 名称。

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

Answer 2

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

Your comment I react to:

Thanks G-Cyrillus. Is it possible to do that with Flex and Bs3? This is a large website which is built entirely with BootStrap3, and upgrading to Bs4 is currently not an option.

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

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

HTML 具有列状结构的页面的响应度

Responsivity in HTML pages with column-like structures

html

css

twitter-bootstrap-3

flexbox

responsive-design