开发时如何在页面上看到引导网格大小的大小？

Question

在开发网页时，可以方便地查看哪些尺寸类别集处于活动状态：xs，sm，md，lg。

我注意到有些扩展显示了网格覆盖，但没有显示尺寸。

有没有一种方法可以指示哪些尺寸设置有效？

Answer 1

使用bootstrap 4.1，您可以在页面上添加类似的内容。

下面的代码将根据您的屏幕宽度显示引导程序使用的当前类。

<div class="alert alert-info">
    <div class="d-none d-xl-block font-weight-bold">X-LARGE (XL)</div>
    <div class="d-none d-lg-block d-xl-none font-weight-bold">LARGE (LG)</div>
    <div class="d-none d-md-block d-lg-none font-weight-bold">MEDIUM (M)</div>
    <div class="d-none d-sm-block d-md-none font-weight-bold">SMALL (SM)</div>
    <div class="d-block d-sm-none alert font-weight-bold">X-SMALL (Defaut)</div>
</div>