html - Bootstrap 4 列表现为一个表

Question

我正在尝试使用 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 中。

我将列类设置为 "col-auto"，因此列的宽度根据其中的数据排列。所有这些一起工作得很好，但问题是当我试图让一些列不显示在中小型设备中时，使用 bootstrap 4“d-none d-lg-block”类，整个表得到所有 buggy 。但这只有在我将此类设置为彼此相邻的两列时才会发生，我将其设置如下:

<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> 

效果很好。

所以，我想知道如何解决这个问题，以及我可以采取哪些不同的措施。

Answer 1

好吧，问题是您正在重写显示属性，因此它不能按照 Bootstrap 定义的那样工作。我会做的是使用典型的 Bootstrap table ，向我想要隐藏的单元格添加一个额外的类，并使用@media 来隐藏它们。 假设该类名为 md-hide，则 css 将如下所示:

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

希望对您有所帮助。