Bootstrap 5引起换行的stop span标签

Question

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

这里的类样式都是Bootstrap 5标准的CSS类样式。在更宽的屏幕上，时间显示在date here下面的<br/>换行符，这是我想要的，但在窄屏幕宽度中，我希望这个日期和时间显示在同一行上，日期和时间之间有3个额外的空格。如果这里有任何解决跨行/换行符问题的建议，请多多指教。‘'carlito’类只设置字体样式和颜色。

​

<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的类，您将把span元素的内联属性更改为block。这就是为什么它会导致这个问题。

Answer 2

d-block和style="display:inline-block“对于相同的容器？，让它变得简单:)，使用自定义样式或内置类。

这是你需要的吗？

​

<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>

​

应该没问题;)