html - Bootstrap- 为什么我的 div 在移动设备上不跳转到下一行？

Question

我有 4 行内容，每行 2 列，这在笔记本电脑上看起来很棒。我尝试使用 Bootstrap 在移动设备上以不同方式排列列，以便每一行只有一列而不是两列。我知道该行是否有 2 个 div，并且每个 div 有 12 个部分，理论上第二个 div 将只是到下面的行，但它不起作用。出于某种原因，这不是两列彼此相邻对齐并挤压在一起，而不是一列在另一列之下。我如何使它在移动设备上看起来更好？这是一行的样子:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <a class="link-image" target="_blank" href=link>
      <div class="picture" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url(some image);">
      </div>
    </a>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="description">
      <h4> <a href=link target="blank">link</a> </h4>
      <p>Some text</p>
    </div>
  </div>
</div>

Answer 1

-xs在 Bootstrap 4 中不再使用。

使用您想要使用的正确 V4 类 <div class="col-12 col-sm-6">...</div>

Grid 的有效尺寸现在是:

.col-* 
.col-sm-*
.col-md-*
.col-lg-*

根据 Bootstrap 文档:https://getbootstrap.com/docs/4.0/migration/#grid-system-1