表格布局、左浮动和引导网格

Question

我针对这个问题进行了研究，但没有得到满意的答案。我正在使用引导程序的网格布局。

请查看Fiddle here并调整输出窗口的大小 - 在调整大小时，您可能已经注意到，当窗口大小足够大以添加col-sm-类时，我的表格布局会中断。

我想要的是，当它们彼此相邻时，两列的高度应该相同（最大元素的高度），并且当它们彼此顶部/底部时，它们应该采用自己的高度（现在正在工作）。

超文本标记语言

<div class="container">
<div class="architect-table">
    <div class="row">
        <div class="cell column-1 col-xs-12 col-sm-6"> abcde </div>
        <div class="cell column-2 col-xs-12 col-sm-6"> abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde </div>
    </div>
</div>

CSS

.architect-table {
    display: table;
    width: 100%;
 }

.row {
     display: table-row;
}

.cell {
     display: table-cell;
     min-height: 44px;
     border: 1px solid black;
 }

但我知道，如果我去掉float: left风格，一切都会很好。但我不能，因为我想要引导程序的网格布局。任何帮助，将不胜感激。

Answer 1

如果flexbox可以的话，您可以进行包装row-请参阅下面的演示： flexbox

.architect-table {
  width: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.architect-table > .row > .cell {
  min-height: 44px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="container">
  <div class="architect-table">
    <div class="row">
      <div class="cell column-1 col-xs-12 col-sm-6">abcde</div>
      <div class="cell column-2 col-xs-12 col-sm-6">abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</div>
    </div>
  </div>
</div>