Table 布局和向左浮动和 bootstrap 网格

Question

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

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

我想要的是当它们彼此相邻时，两列的高度应该相同（最大元素的高度），当它们彼此 top/bottom 时，它们应该有自己的高度（现在可以使用了）。

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

我很遗憾地说，但目前 Bootstrap 没有此功能，如果你想在两个 cols 上有相同的高度，当它们彼此相邻时，你需要玩 JS，有一些库可以帮助你，通常我使用 jQuery.matchHeight 因为它很容易使用。

最佳解决方案是在需要此行为时不要使用 Bootstrap 网格并使用 flex :)

Answer 2

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

Answer 3

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

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Table 布局和向左浮动和 bootstrap 网格

Table layout and float left and bootstrap grid

html

css

twitter-bootstrap

tablelayout