html - 在 Bootstrap 中将两个图像并排放置

Question

我想将这两张图片并排放置，但如果屏幕太小，我还希望它们堆叠在一起。这就是我在 Razor 中所拥有的:

<div class="row">

    <div class="col-sm-12">
        @if (Model.ThumbnailUrl != null)
        {
            <span><img class="thumbnail" src="@Model.ThumbnailUrl" /></span>
        }
        @if (Model.SignatureUrl != null)
        {
            <span><img class="thumbnail" src="@Model.SignatureUrl" /></span>

        }
    </div>
</div>

这是生成的:

<div class="row">
        <div class="col-sm-12">
                <span style="display: inline"><img class="thumbnail" src="something.jpg;width=200&amp;height=200"></span>
                <span style="display: inline"><img class="thumbnail" src="whatever.jpg;width=200&amp;height=200"></span>
        </div>       
</div>

这是它的样子:

他们堆得太早了。屏幕是全尺寸的。也许只是在 Small 或 Extra Small 我希望它们堆叠，否则我希望它们并排。

我应该如何解决这个问题？

Answer 1

这是一个解决方案:

1/使用针对不同屏幕尺寸的 Bootstrap 响应类制作 2 列。

2/在图像上使用 img-responsive 类以在调整大小时使 img 大小适应内容。

.row.row-no-margin {
  margin-left: 0px;
  margin-right: 0px;
}

.col-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-no-margin">
        <div class="col-xs-12 col-sm-6 col-no-padding">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
        <div class="col-xs-12 col-sm-6 col-no-padding">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
</div>