html - 如何删除 Bootstrap 网格中不需要的间隙，使其看起来像一张 table ？

Question

我有一个这样的表格，是我用 div 创建的。但是，如果文本太长，则该行的所有单元格都将填充为白色背景色。

* {
  word-break: break-word;
}       
div {
  display: block;
  border: 1px solid black;
}
.main_div {
  background-color: #D8D8D8;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
}
p {
  display: inline;
}
#verzeichnis {
  text-align: center;
}
.tabelle {
  background-color: #AAAAAA;
  border: 1px solid black;
}
.test {
  background-color: #D8D8D8;
}

<div class="row">
  <div class="col-sm-12 tabelle">
    <p id="verzeichnis"> Test 1 </p>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>A</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p>Status</p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>B</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> short text </p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>short text</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p><span style='color:green'><i class='fa fa-check-circle-o'></i></span></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>very long text which should break to the next line because word wrap is set to break-word</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>A</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p>Status</p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>B</p>
    </div>
  </div>

</div>

注意:stackoverflow 似乎不理解 bootstrap，即使我将它作为外部库包含在我的代码片段中。如果您运行该代码段，它应该是这样的:

我的目标是去除白色间隙，使其看起来像这样。

Answer 1

我会为表格数据使用一个真实的表格。无论如何，您可以使用 CSS display:table 作为解决方法。

父级:

.row {
  margin-left: 0px;
  margin-right: 0px;
  display:table;
  width:100%;
}

children :

.row .col-sm-3 {
  display:table-cell;
  float:none;
}

我建议将此 CSS 应用于特定容器，以尽量减少与 Bootstrap 默认样式的混淆，例如 .customTable .row 和 .customTable .row .col-sm-3

jsFiddle example