引导程序：将图像缩放到其他父内容，并根据内容大小在行内显示和块显示之间切换

Question

我已经尝试了几种不同的方法，并且在使图像显示在Bootstrap中的文本旁边（有一些调整大小要求）方面一直遇到一些小问题。

特定要求：

• 时钟图标应缩放到其右侧的文本高度
• [红色框应仅使用所需的空间，因此，如果它适合插入短语'Other Content'旁边，则应为行内，如果不适合则位于其下方的块。

Required view on a narrow screen (approximate)

Required view on a wide screen (approximate)

一个人怎么能做到这一点？

MWE：

HTML片段

Other content
<div class="sars-notice row">
    <img src="images/infored.png" alt="Info Notice" class="col-sm-1">
    <span class="col-sm-11">Single or multiple lines, depending on content</span>
</div>

CSS片段（未显示是bootstrap4的最小CSS库：]

.sars-notice {
    min-height: 1em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 1px solid darkred;
    border-radius: 0.2em;
    background-color: pink;
    color: darkred;
    padding: 0.2em;
    font-size: 1em;
}

Answer 1

由于bootstrap是一种移动优先方法库，因此您可以拥有它，因此在移动视图中将有2个cols占据所有宽度（col-12），从小屏幕开始（col-sm-x）的布局是将会是11-1。

Other content
<div class="sars-notice row">
    <img src="images/infored.png" alt="Info Notice" class="col-12 col-sm-1>
    <span class="col-12 col-sm-11">Single or multiple lines, depending on content</span>
</div>