时间戳

首页 > 解决方案 > Bootsrap 4 列表现为表格

html - Bootsrap 4 列表现为表格

问题描述

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

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

它工作得很好。

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

标签： htmlcssbootstrap-4

解决方案

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

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

我希望这有帮助。

推荐阅读