代码之家 › 专栏 › 技术社区 › Padawan

bootstrap col-xs-6(两列)总是堆栈。不会在iPhone SE上并排布局[复制]

bootstrap-4 twitter-bootstrap

0

Padawan · 技术社区 · 7 年前

这个问题已经有了答案:

Bootstrap grid won't work using xs columns 2个答案
Bootstrap columns stacking vertically on mobile device 2个答案

我希望这两个图像在iphone se(320px568px)上显示时并排放置,但是图像总是堆叠的。

这是HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
        <img src="/assets/img/appointment/wp.jpg">
    </div>
    <div class="col-xs-6">
        <img src="/assets/img/appointment/sp.jpg">
    </div>
  </div>
</div>

我甚至试着缩小图像的比例,认为可能有过流

.col-xs-6 img {
    max-width: 40%;
}

我错过了什么?

3 回复 | 直到 7 年前

1

M-Farah 7 年前

所有col xs类都已在引导程序4中删除,应将col-xs-6替换为col-6。

你可以在这里看到 notable changes 自举

2

0

Naga Sai A 7 年前

为了达到预期的效果,使用bootstrap 4的padding类来移除额外的padding,这是在堆积图像

密码笔- https://codepen.io/nagasai/pen/ZVyEXM

<div class="container-fluid  pl-0 pr-0">

3

0

Shidersz 7 年前

有几件事不对:

(一) 打开 引导4 col-xs-* 类已被替换为 col-* 班级

2个) 你需要上课 img-fluid 如果你想把它们放在容器上(在这种情况下 col列-* 课程)。

检查下一个示例:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-6 border border-danger">
        <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/500">
    </div>
    <div class="col-6 border border-danger">
        <img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/500">
    </div>
  </div>
</div>

另外,在这个例子中,类 mx-auto d-block 用于图像的水平居中。这个 border 类只是用于可视化帮助。