Question

我已经研究过这个问题，但没有得到令人满意的答案。我正在使用bootstrap的网格布局。

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

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

HTML

<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样式，一切都会正常工作。但我不能因为我想要一个bootstrap的网格布局。任何帮助将不胜感激。

Answer 1

如果flexbox是一个选项，您可以将row 包装 flexbox - 请参阅下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我＆＃39; M伤心地说，但目前引导唐＆＃39; t有这个功能，如果你想拥有在同一高度的两个cols，当他们下一次对方你需要玩JS，有一些库可以帮助你，通常我使用jQuery.matchHeight因为它易于使用。

最佳解决方案是，如果您需要此行为并使用flex，请不要使用Bootstrap网格：）

Answer 3

你可以使用flex。请查看此fiddle

slug = '%thomas%' AND slug = '%john%'

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

3 个答案: