将bootstrap类应用于特定屏幕大小的元素

时间:2018-01-23 17:17:23

标签: css3 bootstrap-4

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

当视口低于md尺寸时,一种情况是将table-sm应用于<table>

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

2 个答案:

答案 0 :(得分:1)

表格大小(table-sm),具体而言,没有响应。但是,还有许多其他Bootstrap类可以使用媒体查询以特定的屏幕宽度(&#34;断点和#34;)响应。

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

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

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

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

答案 1 :(得分:0)

使用bootstrap,不,您需要创建一个css文件并使用@media来定义您希望样式生效的高度或宽度

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp