Question

我有2列3＆＃34;行＆＃34; （或三个项目）。我希望两列中的第1行具有相同的高度，第2行和第3行相同。

我知道如何使用3列2列进行此操作。但是使用带有两列的3行不适用于小型设备，因为左列应该是末尾的第一列和右列。

我希望桌面上的内容如下：

A1|B1 
A1|right row is same height, but less content than A1

A2|B2
no content|B2
no content|B2

A3|B3

在移动设备上应该是：

A1
A2
A3
B1
B2
B3

如果我使用包含两列的3行，我可以在桌面上为每一行使用相同的高度，但在移动设备上我有：

A1
B1
A2
B2
A3
B3

Answer 1

通过构建3行2列无法解决您的具体要求。

你应该尝试将所有左撇子包装成一个div，将所有rightone's包裹成一个div。像这样的东西

<div id="left" class="col-md-8">
  A1<br></br>
  A2<br></br>
  A3<br></br>
</div>
<div id="right" class="col-md-8">
  B1<br></br>
  B2<br></br>
  B3<br></br>
</div>

这种方式在普通桌面版本中看起来像

A1    B1
A2    B2
A3    B3

在移动版中，它应该看起来像你想要的那样

A1
A2
A3
B1
B2
B3

（注意：您需要管理每个元素的高度，如A1，B1，A2，B2，使它看起来像是3x2表，但实际上是1X2。）

如何？ bootstrap - 2列3行高度相等？

1 个答案: