Html 在引导中将两个图像相邻放置

我想把这两个图像放在一起，但是如果屏幕太小，我希望它们叠在一起。这就是我在《剃刀》里看到的：

<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>

@if（Model.ThumbnailUrl！=null）
{
}
@如果（Model.SignatureUrl！=null）
{
}

这就是产生的原因：

<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>

这就是它的样子：

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

---

我应该如何修复此问题？

尝试以下方法：

<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>

@if（Model.ThumbnailUrl！=null）
{
}
@如果（Model.SignatureUrl！=null）
{
}

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

有关更多信息：

---

试试这样的方法：

<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>

@if（Model.ThumbnailUrl！=null）
{
}
@如果（Model.SignatureUrl！=null）
{
}

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

有关更多信息：

---

这里有一个解决方案：

1/制作2列，带有引导响应类，适用于不同的屏幕大小

2/在图像上使用img响应类，以便在调整大小时根据内容调整img大小

.row.row-no-margin{
左边距：0px；
右边距：0px；
}
.col无填充{
左侧填充：0！重要；
右边填充：0！重要；
}

---

这里有一个解决方案：

1/制作2列，带有引导响应类，适用于不同的屏幕大小

2/在图像上使用img响应类，以便在调整大小时根据内容调整img大小

.row.row-no-margin{
左边距：0px；
右边距：0px；
}
.col无填充{
左侧填充：0！重要；
右边填充：0！重要；
}

我最初是这样做的，但后来他们之间会有差距。我想要它们并排。我本来是这样的，但后来它们之间会有一段距离。我希望它们并排。hmm不知道img响应我添加了两个类来移除引导列之间的空间，如果您希望图像并排。hmm不知道img响应我添加了两个类来移除引导列之间的空间，如果您希望图像并排。