表格布局和左浮动和引导网格答案

【问题标题】：Table layout and float left and bootstrap grid表格布局和左浮动和引导网格
【发布时间】：2024-05-18 22:50:02
【问题描述】：

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

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

【问题讨论】：

标签： html css twitter-bootstrap tablelayout

【解决方案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>

【讨论】：

我认为使用flex 的最佳解决方案。

【解决方案2】：

你可以使用弹性。请检查此fiddle

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

【讨论】：

用flex 覆盖所有.row > [class*='col-'] 不是一个好主意。 :)
正确。这只是为了他的参考意味着他可能会使用一些类。但是你说的是对的。谢谢。

【解决方案3】：

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

最好的解决方案是当你想要这种行为时不要使用引导网格并使用flex :)

【讨论】：