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

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>  

Answer 2

Bootstrap网格系统有4个类

1. xs for mobile（768px以下）
2. sm for tablet（768以上及992以下）
3. md for desktops（992以上和1200以下）
4. lg适用于较大的桌面（1200以上）

所以，有了这个值。您可以更改宽度并了解当前处于活动状态的类。

Answer 3

如果您使用的是Chrome开发工具，则不需要任何扩展。

1. 按F12
打开Chrome开发者工具
2. 调整窗口大小
3. 您会在右上角看到窗口的大小。
4. 在开发者窗口中选择要检查哪个类处于活动状态的Div。
5. 再次调整窗口大小。
6. 您将看到活动类名称将显示在开发人员工具的样式窗格中。

Answer 4

有javascript解决方案：

Responsive Bootstrap Toolkit

如果要检测使用css设置的当前大小，可以为body或任何其他元素创建css规则：

@media only screen and (min-width: 1280px) {
    .body-helper {background: green;}
}

@media only screen and (min-width: 992px) and (max-width: 1279px) {
    .body-helper {background: pink;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .body-helper {background: maroon;}
}

@media only screen and (max-width: 767px) {
    .body-helper {background: lightblue;}
}

请使用引导程序设置的适当断点。因此，您可以通过背景更改识别当前大小设置。

Answer 5

您可以通过Google Chrome上的开发者工具检查您的屏幕尺寸或媒体查询断点。您可以在Google Chromes开发人员工具中查看“Test Responsive and Device-specific Viewports”。

Answer 6

您可以使用隐藏列。所以你隐藏了其他屏幕尺寸的div。

示例：

 <div class="col-lg-3"> <div class="visible-lg hidden-xs hidden-sm hidden-md">col-lg</div> </div>

了解详情： Scotch.io - 自适应公用事业