垂直居中的Flexbox/Bootstrap列中可选的span文本后缀
垂直居中的Flexbox/Bootstrap列中可选的span文本后缀
提问于 2021-03-09 11:30:27
我想在垂直居中的柔性盒/引导列中显示一个可选的文本后缀。它只应该显示在小屏幕上。下面的代码可以工作，但只有当我在span元素上使用"display:contents“时才能工作，而span元素没有完美的浏览器支持。如果删除"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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-09 13:24:42
d-flex是display:flex;
元素使用流布局(块和内联布局)来布局其内容。
如果它的外部显示类型是内联或运行的，并且它正在参与块或内联格式设置上下文，那么它将生成一个内联框。否则，它将生成一个块容器框。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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66546071
复制相关文章
相似问题
腾讯云开发者
