我想将这两张图片并排放置,但如果屏幕太小,我还希望它们堆叠在一起。这就是我在 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&height=200"></span>
<span style="display: inline"><img class="thumbnail" src="whatever.jpg;width=200&height=200"></span>
</div>
</div>
这是它的样子:
他们堆得太早了。屏幕是全尺寸的。也许只是在 Small 或 Extra Small 我希望它们堆叠,否则我希望它们并排。
我应该如何解决这个问题?
最佳答案
这是一个解决方案:
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>
关于html - 在 Bootstrap 中将两个图像并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37424890/