Bootstrap-为什么我的 div 不会跳到移动设备上的下一行？答案

【问题标题】：Bootstrap- why won't my div jump to the next row on mobile?Bootstrap-为什么我的 div 不会跳到移动设备上的下一行？
【发布时间】：2017-12-13 06:25:13
【问题描述】：

我有 4 行内容，每行 2 列，这在笔记本电脑上看起来很棒。我尝试使用引导程序在移动设备上以不同的方式排列列，以便每一行只有一列而不是两列。我知道该行是否有 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>

【问题讨论】：

您是否对引导类进行了任何 CSS 更改？
jsfiddle.net/ukgrakL6 你的例子对我来说似乎很好
与@Pat 相同，这似乎工作得很好。您是否有一些冲突的 CSS 会影响这一点？
您使用的是什么版本的引导程序？如果您使用的是 bootstrap 4，您可以尝试 col-12 而不是 col-xs-12 看看是否有任何改变。
是的，更改 CSS 修复了它，尽管现在我遇到了不同的问题。我在 div 中有 display: flex 并将最小高度设置为 90vh，这样我就可以有一个相当大的 div，其中两个项目居中。当我移除 flex 时，它们不再垂直居中，并且底部有很多空间。当我删除最小高度时，它们居中的 div 但它们所在的框要小得多。如果没有 flex，我如何仍然拥有一个大 div 并将其中的项目居中？

标签： html css twitter-bootstrap

【解决方案1】：

-xs 在 Bootstrap 4 中不再使用。

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

Grid 的有效尺寸现在是：

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

每个引导文档：https://getbootstrap.com/docs/4.0/migration/#grid-system-1

【讨论】：

【解决方案2】：

您的代码很好。有用。您只看到 1 行的原因是第一个 <div class="col-xs-12 col-sm-6"> 没有内容，但没有生成高度和宽度。

解决办法：

只需将内容添加到第一个<div class="col-xs-12 col-sm-6">，它就会出现
如果您想将其留空，请设置属性min-height。

出于视觉目的，我在示例中添加了一些颜色。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
    <div class="row">
        <div class="col-xs-12 col-sm-6" style="background-color: dodgerblue; min-height: 76px;">
            <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" style="background-color: coral;">
            <div class="description">
                <h4> <a href=link target="blank">link</a> </h4>
                <p>Some text</p>
            </div>
        </div>
    </div>
</body>
</html>

输出（截图）：

【讨论】：