html - Bootstrap 无响应并排图像

Question

我有以下显示两张图片的代码(都是大约 350 像素宽)。现在它们显示在侧边栏中，在桌面/平板电脑(col-lg、col-md、col-sm)上设置为 400px 宽，但在 col-xs 屏幕上为 100% 宽。 col-xs 在 <768px 开始，所以最初我希望这两个图像并排放置，但是一旦它们因空间而变得狭窄并接近接触时，我希望它们回到上方/下方。目前，一旦它低于大约 700 像素，右图就会开始与左图重叠。

<div class="market-img col-xs-6 col-sm-12">
  <img src="$Image1.URL" />
</div>
<div class="market-img col-xs-6 col-sm-12">
  <img src="$Image2.URL" />
</div>

我不希望它们对 img 有响应，因为它们在小屏幕上并排放置，以至于您无法很好地看到它们。我该如何强制图像返回上方/下方？

Answer 1

你的类声明倒退了。

col-sm-12 col-xs-6

应该是

col-sm-6 col-xs-12

( Demo )