css 使用col-s-4时，三个图像不是并排而是垂直的

2ekbmq32 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(126)

因此，我尝试使用bootstrap row和col-s-4将三个图像并排放置。当使用桌面大小时它可以工作，但当涉及到移动的和平板电脑大小时，图像是垂直堆叠的？
下面是我的HTML代码：

<div class="container-fluid">
        <div class="row" id="order">
            <div class="col-s-4">
                <img class="img-responsive" src="order/order1.jpg">
            </div>
            <div class="col-s-4">
                <img class="img-responsive" src="order/order2.jpg">
            </div>
            <div class="col-s-4">
                <img class="img-responsive" src="order/order3.jpg">
            </div>
        </div>
</div>

下面是我的CSS代码：

#order{
  align-items: center;
  text-align: center;
}

#order img{
  object-fit: contain;
}

#order label{
  font-family: 'Jellee', sans-serif;
  font-weight: 200;
  color: black;
  text-align: center;
  padding: 0%;
}

我尝试最小化图像，使用max-width：100%，宽度：计算（100%/3）;但似乎没有什么工作，只是最小化的形象，但它仍然是堆叠水平
mobile version, image are all vertically stacked
但我希望它像桌面版本，其中所有的图像都是水平的
desktop version, images are horizontal

css

来源：https://stackoverflow.com/questions/76539516/three-images-not-side-by-side-but-vertical-when-using-col-s-4

1条答案

按热度按时间

ui7jx7zq1#

通过使用Bootstrap，您可以在移动的和桌面版本中使三个图像并排对齐。您可以使用Bootstrap的Grid System特性来实现这一点。

<div class="row">
      <div class="col-md-4 col-sm-4">
        <img src="foto1.jpg" alt="foto 1">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="foto2.jpg" alt="foto 2">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="foto3.jpg" alt="foto 3">
      </div>
    </div>

在这里，我们使用row类创建了一个行，并使用col-md-4 col-sm-4类将每个图像分成三个相等大小的大小。使用col-md-4类，我们在桌面版本中将每张图片分成3张，并将它们并排对齐。对于col-sm-4类，我们在移动的版本中将其分为3个，并将其并排对齐。
通过这种方式，将确保所有三个图像在桌面和移动的版本中并排对齐。

赞(0）回复(0）举报 2023-06-25

我来回答

css 使用col-s-4时，三个图像不是并排而是垂直的

1条答案

相关问题

热门标签

最新问答