在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响应类以使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>