Bootstrap使用d-none d-md-block后内容换行，如何让span与logo同行？

问题场景 #

我正在使用Bootstrap实现仅在大屏设备上条件显示内容，功能生效但存在排版问题：

<a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt=""><span class="d-none d-md-block">My strapline<span></a>

添加d-none d-md-block类后，span里的文字会跑到logo下方；但去掉这个类时，文字能正常和logo并排显示。需要让大屏下span内容和logo保持同行。

解决方法 #

1. 替换显示类
   d-md-block会将span转为块级元素，块级元素默认独占一行，这是导致换行的核心原因。把这个类换成行内/行内块级的显示类即可：
   • 用d-none d-md-inline：让span保持行内元素特性，和logo同行
   • 用d-none d-md-inline-block：如果需要给span设置宽高、内外边距，选这个更灵活

调整后的代码示例：

<a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt=""><span class="d-none d-md-inline">My strapline</span></a>

2. 优化垂直对齐（可选）
   如果logo和文字存在垂直错位，可以给img和span都加上align-middle类，确保两者垂直居中对齐：

<a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt="" class="align-middle"><span class="d-none d-md-inline align-middle">My strapline</span></a>

内容的提问来源于stack exchange，提问作者Kevin Dev