在开发过程中可视化 Bootstrap 4.x 网格断点答案

【问题标题】：Visualizing Bootstrap 4.x Grid Breakpoints during development在开发过程中可视化 Bootstrap 4.x 网格断点
【发布时间】：2020-09-29 05:43:03
【问题描述】：

如果您在 Bootstrap 4.x 中使用网格系统，那么准确地知道哪个网格断点对应于当前视口宽度会很有用。

【问题讨论】：

标签： html css bootstrap-4 responsive-design

【解决方案1】：

您可以通过在页面顶部添加以下 HTML 来完成此操作。调整浏览器窗口大小时，会显示相应的大小。

<div class="d-block d-sm-none">
    <b>Extra Small</b> &lt;576px
</div>
<div class="d-none d-sm-block d-md-none">
    <b>Small</b> &ge;576px
</div>
<div class="d-none d-md-block d-lg-none">
    <b>Medium</b> &ge;768px
</div>
<div class="d-none d-lg-block d-xl-none">
    <b>Large</b> &ge;992px
</div>
<div class="d-none d-xl-block">
    <b>Extra Large</b> &ge;1200px
</div>

当您调整浏览器窗口的大小时，您可以看到当前的网格断点是什么。请记住在开发完成后将其删除。

【讨论】：

什么？你为什么这么做？ :S