Bootstrap无响应的并排图像

时间:2015-05-24 06:40:30

标签: html css twitter-bootstrap twitter-bootstrap-3

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

<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-responsive,因为它们在小屏幕上并排存在,并且它达到了你无法很好地看到它们的程度。如何强制图像返回上/下?

1 个答案:

答案 0 :(得分:0)

你的课程声明倒退了。

col-sm-12 col-xs-6

应该是

col-sm-6 col-xs-12

Demo