Css 将引导类应用于特定屏幕大小的元素

Css 将引导类应用于特定屏幕大小的元素,css,bootstrap-4,Css,Bootstrap 4,在使用bootstrap时,有没有一种方法可以将CSS类仅应用于特定屏幕大小的HTML元素 一种情况是,当视口小于md大小时,将表sm应用于 目前,我有两个单独的表,一个隐藏,一个显示,具体取决于视口大小。对于引导,否,您需要创建一个css文件,并使用@media定义希望样式生效的高度或宽度 具体而言,表格大小(表格sm)没有响应。然而,还有许多其他的引导类使用媒体查询在特定的屏幕宽度(“断点”)上响应地工作 可以控制水平表格滚动,但这不会影响表格单元格内的大小或间距 一个简单的解决方法是通过媒

在使用bootstrap时,有没有一种方法可以将CSS类仅应用于特定屏幕大小的HTML元素

一种情况是,当视口小于md大小时,将
表sm
应用于


目前,我有两个单独的表,一个隐藏,一个显示,具体取决于视口大小。

对于引导,否,您需要创建一个css文件,并使用@media定义希望样式生效的高度或宽度

具体而言,表格大小(
表格sm
)没有响应。然而,还有许多其他的引导类使用媒体查询在特定的屏幕宽度(“断点”)上响应地工作

可以控制水平表格滚动,但这不会影响表格单元格内的大小或间距

一个简单的解决方法是通过媒体查询将正常的表大小应用到特定屏幕宽度以上的
.table sm

@media (min-width:992px) {
    .table-sm td, .table-sm th {
        padding: .75rem;
    }
}
演示: