Bootstrap col-xs-6（两列）始终堆叠。不会在iPhone SE上并排布局

Question

在iPhone SE上显示时，我希望这两张图片并排放置（320px X 568px），但是这些图片始终会堆叠在一起。

这是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%;
}

我想念什么？

Answer 1

所有col-xs类都已在Bootstrap 4中删除，您应将col-xs-6替换为col-6。

您可以在此处查看引导程序的notable changes

Answer 2

要获得预期的结果，请使用引导程序4的padding类删除多余的padding（堆积图像）

codepen-https://codepen.io/nagasai/pen/ZVyEXM

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

Answer 3

有些错误：

1）在 Bootstrap 4 上，col-xs-*类仅由col-*类替代

2）如果您希望图像很好地适合它们的容器（在这种情况下为img-fluid类），则需要在图像上使用类col-*。 / p>

检查下一个示例：

<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类仅用于视觉帮助。