Home / Questions / 55322
Accepted
Pablo Ezequiel Inchausti
Asked: 2020-03-15 12:48:46 +0800 CST 2020-03-15 12:48:46 +0800 CST

调整大小时如何使用 Bootstrap4 隐藏列？

  • 772

将屏幕分辨率更改为较低的分辨率时，如何使用 bootstrap4 隐藏表格列？例如，在下表中，当浏览器变小时，隐藏带有“Lat, Lng”的列：

表中代码正常：

<table class="table table-striped">
 <thead>
  <tr>
    <th>Place Name</th>
    <th>[ Lat, Lng ]</th>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <tbody>
  <tr *ngFor="let place of places">
   <td>{{ place.address  }}</td>
   <td><small>[ {{ place.latitude }}, {{ place.longitude }} ]</small></td>
   <td><button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" (click)="viewPlace(place)"><span class="fa fa-search-plus fa-lg"></span> view</button></td>
   <td><button type="button" class="btn btn-link" (click)="deletePlace(place)"><span class="fa fa-trash-o fa-lg"></span> delete</button></td>
  </tr>
 </tbody>
</table>
bootstrap

2 Answers

  1. Best Answer

    将类添加hidden-md-down到元素<th>并<td>对应。该类指示此类元素应以中等或更小的分辨率隐藏，这对应于以下分辨率：超小、小和中。

    在此页面上，您可以看到不同的帮助器类，这些帮助器类有助于根据客户端的当前分辨率隐藏页面内容。

    下面我放一张Bootstrap 4网格系统中现有分辨率（跳转）的图像（可以在这里查阅）：

    在此处输入图像描述

    • 2

  2. 该课程hidden-md-down在引导程序 4 中对我不起作用。我使用了d-noneand classes d-md-block。d-none总是隐藏，但d-md-block在中等大小的设备上显示。

    欲了解更多信息：https ://getbootstrap.com/docs/4.0/utilities/display/

    • 1