时间戳

首页 > 解决方案 > CSS：复制 Bootstrap 类 table-sm 并仅适用于移动屏幕

css - CSS：复制 Bootstrap 类 table-sm 并仅适用于移动屏幕

问题描述

我使用Bootstrap 4创建一个如下开头的表。Bootstrap 有一个内置类"table-sm"，可以最小化填充（可能还有其他东西），以使表格更适合小屏幕。

当我在下面的示例中应用此类而不是"table-custom"按预期工作时，但我只想将其应用在移动（小）屏幕上。因此，我创建了一个类"table-custom"并使用了下面的 CSS，但我无法让它工作。

有人能告诉我我还需要做什么来复制"table-sm"课程并将其限制在移动（小）屏幕上吗？

我的 HTML（开始）： 

<div class="table-responsive">
    <table class="table table-custom table-hover">
        <thead>
            <tr>

我的 CSS： 

@media (max-width: 767px) {
    .table-custom>thead>tr>th, 
    .table-custom>thead>tr>td, 
    .table-custom>tbody>tr>th, 
    .table-custom>tbody>tr>td, 
    .table-custom>tfoot>tr>th, 
    .table-custom>tfoot>tr>td {
        padding: 5px;
    }
}

非常感谢，
迈克

标签： csstwitter-bootstraphtml-tablebootstrap-4media

解决方案

Bootstrap 不为小视口提供任何 table-sm 变体。您需要使用引导程序 (CSS) 媒体查询来定位它

@media (max-width: 767.98px) { 
 .table-custom th,
 .table-custom td {
     padding: .3em !important;
  }
}

推荐阅读