html - 如何在 Bootstrap 网格中放置详细 View

Question

我正在尝试在我的 Web 应用程序的行之间放置详细信息 View 。我正在使用 Bootstrap 和一些前端渲染。

我的代码看起来像这样:

<div class="col-sm-4 col-xs-6">
    ...
</div>
<div class="col-sm-4 col-xs-6">
    ...
</div>
etc...

我基本上是在寻找在 Bootstrap 或执行此操作的库中执行此操作的方法。我能找到的最接近的示例是在最新的 iTunes 版本中，我附上了它的屏幕截图。

编辑:

我尝试/想到的:

1. 将详细 View 作为一个绝对定位的 div 放在磁贴内，并为磁贴提供一个底部边距。

这没有成功，因为布局完全中断了。要实现这一点，您必须为该行中的所有元素提供一个底部边距。

1. 将一组图 block 放入一个 row-div 中，然后在该特定行之后插入详细信息 div。

这要么会破坏所有响应功能，要么需要大量 javascript 以某种方式动态地将 div 放入行中。

我主要是在寻找一个库/css hack，让我无需编写大量 javascript 即可完成此操作。

Answer 1

对于“详细信息”行，您可能只需要使用:

<div class="col-xs-12">
    ...
</div>

这将迫使它跨越整个宽度，而不管屏幕尺寸如何。所以你的 3 行看起来像:

<div class="col-sm-4 col-xs-6">
    ...
</div>
<div class="col-xs-12">
    ...
</div>
<div class="col-sm-4 col-xs-6">
    ...
</div>