Bootstrap 4 列表现得像一个表答案

【问题标题】：Bootsrap 4 columns behaving as a tableBootstrap 4 列表现得像一个表
【发布时间】：2019-09-10 20:10:25
【问题描述】：

我正在尝试使用 bootstrap 4 网格重新创建一个表。我用这个 CSS 代码让它表现得像一个表格

.data-table{
    display : table ;        
    padding : 0em; 
}

.data-table > .row{
  display : table-row ; 
}

.data-table > .row > * {
  display : table-cell ; 
  white-space : nowrap ; 
}

.data-table 位于 .container div 中。

我将 columns 类设置为 "col-auto" ，所以列的宽度是根据里面的数据来排列的。所有这些一起工作得很好，但问题是当我尝试让一些列不显示在中小型设备中时，使用引导程序 4“d-none d-lg-block”类，整个表得到都是越野车。但这只有在我将此类设置在彼此相邻的两列中时才会发生，我将其设置如下：

<div class "col-auto d-none d-lg-block"><!--code--></div> 
<div class "col-auto">--code--</div> 
<div class "col-auto d-none d-lg-block"><!--code--></div>

效果很好。

所以，我想知道如何解决这个问题，以及我可以做些什么不同的事情。

【问题讨论】：

我认为小屏幕最好的方法是水平滚动表格而不是隐藏列。为此，只需将 overflow-x: auto 添加到表的父元素即可。
是的，我也认为这是最好的方法，但我的上级希望我隐藏这些列。它有效，但由于某种原因不是我正在做的方式。

标签： html css bootstrap-4

【解决方案1】：

问题是你正在重写显示属性，所以它不能像引导程序定义的那样工作。我要做的是使用典型的引导程序table，向我想要隐藏的单元格添加一个额外的类，然后使用@media 隐藏它们。假设该类被命名为 md-hide，那么 css 将如下所示：

@media screen and (max-width: 992px) {
   .md-hide {
      display: none;
   }
}

我希望这会有所帮助。

【讨论】：