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>

这就是它的样子：

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

我该如何解决这个问题？

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>

Answer 2

尝试这样的事情：

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

基本上，您需要使用Bootstrap的列来排列图像。现在，您要为每个图像创建一个大小为12的列，即行的整个宽度。

了解更多信息： https://getbootstrap.com/examples/grid/

在Bootstrap中将两个图像彼此相邻

2 个答案: