如何在引导网格

Question

我正在尝试在我的Web应用程序中的行之间放置详细视图。 我正在使用Bootstrap和一些Frontend Rendering。

我的代码看起来有点像这样：

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

我基本上在寻找一些方法来在bootstrap或一些库中执行此操作。我能找到的最接近的例子是最新的itunes版本，我附上了截图。

修改

我的尝试/想法：

1. 将细节视图作为绝对定位的div放在图块内，并为图块添加边距底部。

由于布局完全破坏，因此无法解决问题。为了使其工作，您必须为行中的所有元素提供边距底部。

1. 将一组图块放入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>