twitter-bootstrap - 调整屏幕大小时显示引导断点名称

Question

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

它有6个断点

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

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

例如这里。见“XX”

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

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

标签： twitter-bootstrapgoogle-chrome-devtools

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>