Bootstrap-4 显示实用程序不会在较小的屏幕尺寸上隐藏元素

Question

像在小/超小屏幕上隐藏元素这样的小事是行不通的。是否与 Bootstrap 4.6.1 弃用的某些内容的浏览器兼容性有关？

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
    <div class="d-md-block d-sm-none d-xs-none">
        <h1>Don't display on small and extra small</h1>
    </div>
</body>

</html>

Answer 1

您面临的问题与用于显示的 Bootstrap 4 实用程序类有关，特别是 d-md-block、d-sm-nonе 和 d-xs-nonе 类。

在 Bootstrap 4. 0 及更高版本中，删除了 d-xs-nonе 类，并将所有断点（包括超小屏幕）的 d-sm-nonе 类更改为 d-nonе。这样做是为了简化类名称并提高一致性。

要在小屏幕和超小屏幕上隐藏元素，您可以使用 d-none d-sm-block 类。这将隐藏小于 sm 断点（576 像素）的屏幕上的元素，并在等于或大于 sm 断点的屏幕上显示它。

这是您更新的代码：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
    <div class="d-none d-sm-block">
        <h1>Don't display on small and extra small</h1>
    </div>
</body>

</html>

Bootstrap-4 显示实用程序不会在较小的屏幕尺寸上隐藏元素

问题描述投票：0回答：1

1个回答

最新问题

Bootstrap-4 显示实用程序不会在较小的屏幕尺寸上隐藏元素

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1