使用 CSS 将 Bootstrap 列转换为充当 table 时变白 space

Question

* {
  box-sizing: border-box;
}
.row-table {
  width: 100%;
  margin: 0!important;
  table-layout: fixed;
}
.row-t {
  display: table!important;
}
.row-tr {
  display: table-row!important;
}
[class*="col-"] {
  display: table-cell!important;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 2px solid red;
  float: none!important;
}
.parent {
  border: 2px solid #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div class="container-fluid">
  <div class="row row-table row-t parent">
    <div class="col-xs-6 col-sm-4 col-md-3">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3">4</div>
  </div>
  <br>
  <br>
  <div class="row-t row-table parent">
    <div class="row row-tr">
      <div class="col-xs-6 col-sm-4 col-md-3">1</div>
      <div class="col-xs-6 col-sm-4 col-md-3">2</div>
      <div class="col-xs-6 col-sm-4 col-md-3">3</div>
      <div class="col-xs-6 col-sm-4 col-md-3">4</div>
    </div>
  </div>

</div>

Sorry, this question has been slightly changed to fix a issue, as it wasn't getting Reproduced earlier.

我希望我的 bootstrap 列具有与表格相同的高度，并且应该能够在中间垂直对齐它们 - 这就是我所做的工作。

尝试在全屏视图中查看这些片段 - 您会注意到 ~1px 红色和黑色之间左右边界上的空白。我需要删除它，但是如何？（特别是 Google Chrome）

也请告诉我，哪种方法更适合这种要求。

这个方法正确吗？

行是 display:table;

.row {
    display:table;
    margin:0;
    width:100%;
    table-layout:fixed;
}
.row >[class*="col-"] {
    display:table-cell;
    float:none;
}

或者这个方法是正确的？

行是display:table行；

.row {
    display:table-row;
    margin:0;
    width:100%;
    table-layout:fixed;
}
.row >[class*="col-"] {
    display:table-cell;
    float:none;
}

Answer 1

总之，我找到了解决办法，这个问题只出现在Google Chrome上。它需要一个轻微的解决方法。我必须将 border-collapse:collapse; 添加到父元素，并且必须删除其边框属性.

* {
  box-sizing: border-box;
}
.row-table {
  width: 100%;
  margin: 0!important;
  table-layout: fixed;
  border-collapse: collapse;
}
.row-t {
  display: table!important;
}
.row-tr {
  display: table-row!important;
}
[class*="col-"] {
  display: table-cell!important;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 2px solid red;
  float: none!important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div class="container-fluid">
  <div class="row row-table row-t parent">
    <div class="col-xs-6 col-sm-4 col-md-3">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3">4</div>
  </div>
  <br>
  <br>
  <div class="row-t row-table parent">
    <div class="row row-tr">
      <div class="col-xs-6 col-sm-4 col-md-3">1</div>
      <div class="col-xs-6 col-sm-4 col-md-3">2</div>
      <div class="col-xs-6 col-sm-4 col-md-3">3</div>
      <div class="col-xs-6 col-sm-4 col-md-3">4</div>
    </div>
  </div>

</div>

使用 CSS 将 Bootstrap 列转换为充当 table 时变白 space

Getting white space when converting Bootstrap Columns to act as table using CSS

html

css

twitter-bootstrap

google-chrome

css-tables