Question

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

 function startSlider() {
    interval = setInterval(function() {
      $slides.animate({marginLeft: '-='+width}, animationSpeed, function() {
      currentSlide++;
        if (currentSlide === $slide.length) {
          currentSlide = 1;
          $slides.css({marginLeft: 0});
        };
      });
    },imgTime);
  };'

Answer 1

Bootstrap 4中不再使用

-xs。

使用正确的V4课程，您可以使用<div class="col-12 col-sm-6">...</div>

Grid的有效大小现在是：

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

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

Answer 2

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

解决方案：

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

为了视觉目的，我在样品中加了一些颜色。

＆＃13;

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

＆＃13;

输出（截图）：

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

2 个答案: