垂直居中的 Flexbox/Bootstrap 列中的可选跨度文本后缀答案

【问题标题】：Optional span text suffix in vertically centered Flexbox/Bootstrap column垂直居中的 Flexbox/Bootstrap 列中的可选跨度文本后缀
【发布时间】：2021-06-07 07:02:50
【问题描述】：

我想在垂直居中的 flexbox/bootstrap 列中显示可选的文本后缀。它应该只显示在小屏幕上。以下代码有效，但前提是我在跨度元素上使用“显示：内容”，它没有完美的浏览器支持。如果我删除“display:contents”，文本后缀将显示为另一列。如何在不使用 display:contents 的情况下使文本后缀与前面的文本一起流动？

<div class="row">
   <div class="col-2">
      <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
   </div> 
   <div class="col d-flex align-items-center">
        Title text Title Text 
        <span class="d-lg-none" style="display:contents">
           (Optional column is here on small devices)
        </span>
   </div>
   <div class="col-2 d-none d-lg-flex align-items-center">
      Optional column
   </div>
</div>

https://jsfiddle.net/9z81tvsx/

【问题讨论】：

尝试使用 css 媒体查询。我想它会回答你的问题。 developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

标签： css bootstrap-4 flexbox

【解决方案1】：

d-flex 是`display:flex;`

元素使用流式布局（块内嵌布局）来布局其内容。

如果它的外部显示类型是 inline 或 run-in，并且它正在参与块或 inline 格式化上下文，那么它生成一个内联框。否则它会生成一个块容器框。 https://developer.mozilla.org

您在其父级上使用.d-flex。因此，span.d-lg-none 在小尺寸屏幕上有display:block。因此，它的行为就像一个列。

您可以通过将文本包装在段落元素中来解决此问题。

<p>Title text Title Text <span class="d-lg-none" >(Optional column is here on small devices)</span></p>

【讨论】：

d-flex 是display:flex;

d-flex 是`display:flex;`