css - 将 Bootstrap 类应用于特定屏幕尺寸的元素

标签 css bootstrap-4

有没有办法在使用 Bootstrap 时仅在特定屏幕尺寸下将 CSS 类应用于 HTML 元素?

一种情况是应用 table-sm<table>当视口(viewport)小于 md 大小时。

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

最佳答案

表格大小 (table-sm),特别是没有响应。但是,还有许多其他 Bootstrap 类可以使用媒体查询在特定屏幕宽度(“断点”)下响应式地工作。

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

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

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

演示:https://www.codeply.com/go/cF7T4TrBe3

关于css - 将 Bootstrap 类应用于特定屏幕尺寸的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48407398/

相关文章:

jquery - Bootstrap 4 - 复选框在 Bootstrap 模式的弹出窗口内无法正常工作

javascript - 如何将组件的结果呈现为卡片

javascript - 如何使引导导航选项卡的内容仅占据一行?

css - PostCSS 导入不在@media 查询中导入文件

html - 表在 tr 中设置最大行数

javascript - 如何在 IE11/Windows 8 中删除样式选择中不需要的填充

html - 如何使用 Bootstrap 使表格响应并与图像对齐

jquery - 在 btn-group twitter-bootstrap 中隐藏按钮

css - 在我的页面中集成视频全屏的最佳解决方案

css - 如何将标题移动到 Bootstrap 4 卡片元素内文本的左侧?