Bootstrap 5 stop span 标记导致换行

Question

根据关于此的其他问题，我正在尝试使用 white-space:nowrap; 来停止此文本中导致换行的 span 标记，但尚未成功。

Class这里的款式都是Bootstrap5个标准的CSSclass款式。在较宽的屏幕中，时间显示在日期下方，并带有 <br/> 换行符，这是我想要的，但在较窄的屏幕宽度中，我希望此日期和时间出现在同一行，日期和时间之间有 3 个额外的空格.如果有任何解决跨度/换行问题的建议，谢谢。 'carlito' class 只设置字体样式和颜色。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-block d-md-none" style="display: inline-block;">   </span>
    <br class="d-none d-md-block" />11AM - 3PM </h4>
</div>

Answer 1

从您的 span 元素中删除 d-block 的 class，您正在将 span 元素的内联属性更改为块。这就是它导致问题的原因。

Answer 2

d-block 和 style="display:inline-block" 用于同一个容器？，使其简单 :)，使用自定义样式或内置 class.

这是您需要的吗？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-inline-block d-md-none" >   </span>
    <br class="d-none d-md-block" />11AM - 3PM </h4>
</div>

如果是，那么：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 col-md-3 carlito" style="white-space:nowrap;">
  <h4 class="text-center text-danger">Sunday 28th March 2021
    <span class="d-inline-block d-md-block" >   
     11AM - 3PM </span></h4>
</div>

应该没问题 ;)

Bootstrap 5 stop span 标记导致换行

Bootstrap 5 stop span tag causing line break

css

bootstrap-5