html - Bootstrap 4列表现为表格

我正在尝试使用bootstrap 4网格重新创建表。我用它将此代码表现为表格

.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中。

我将列类设置为“ 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>

效果很好。

因此，我想知道如何解决此问题以及可以做些什么。

最佳答案

好了，问题在于您正在重新编写display属性，因此它不能按照引导程序的定义工作。我要做的是使用典型的引导程序table，向要隐藏的单元格添加一个额外的类，并使用@media对其进行隐藏。
假设该类名为md-hide，css将如下所示：

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

我希望这有帮助。

关于html - Bootstrap 4列表现为表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57869047/