调整屏幕大小时显示 Bootstrap 断点名称

Question

我使用Bootstrap 5开发响应式应用程序：

有6个断点

• xs
• sm
• md
• lg
• xl
• xxl

如果 chrome 开发工具可以显示当前宽度的缩写，那就非常方便了。

例如这里。参见“XX”

我知道我可以修改 HTML 来获得结果，但不更改我正在处理的 HTML 的解决方案会非常酷。

在上面的示例中，宽度474小于576px，这意味着断点的名称将为xs。

Answer 1

这就是我用的。即使不在检查模式下，它也能帮助我，即使您使用 bs 变量更改断点，它也能继续工作。

<div style="
    position: fixed;
    top: 90%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background: rgba(247, 201, 241, 0.4);
    padding: .5rem 1rem;
    border-radius: 30px;
">
    <div class="d-block d-sm-none">Extra Small (xs)</div>
    <div class="d-none d-sm-block d-md-none">Small (sm)</div>
    <div class="d-none d-md-block d-lg-none">Medium (md)</div>
    <div class="d-none d-lg-block d-xl-none">Large (lg)</div>
    <div class="d-none d-xl-block d-xxl-none" >X-Large (xl)</div>
    <div class="d-none d-xxl-block" >XX-Large (xxl)</div>
</div>