Html 用Bootstrap绘制复杂网格

我正在使用Bootstrap3处理HTML视图。我需要用不同的单元格创建一个模板，我通常使用col和rows，但这次我在绘制一列时遇到了问题

这就是我需要的计划：

代码如下：

<div class="row">
  <div class="col-md-3 doubleHeight"></div>
  <div class="col-md-9 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <!--column bottom right-->
  <!--column bottom left-->
</div>

当我尝试在右下角绘制柱时，问题就开始了。如果我在两个col-md-3后面绘制它，它不允许我显示左侧的最后一列。如果我在左边最后一列后面画，它不会占用上面的空间。 你知道可能的解决办法吗？

---

谢谢。

（javascript）似乎非常适合于此，尽管它不是纯粹的CSS/引导。

警告：这篇文章在不同的解释中包含了相同片段的多种变体，以演示逻辑并提供代码实际运行方式的可视化表示。如果你编辑它，请记住这一点

在我给出解决方案之前，我想把一些非常清楚，这是不受引导框架支持的。为了澄清这一点，Bootstrap支持对可用于解释这一点的块进行包装，但是，它不会操纵

高度来容纳跨越多行的块

好吧，话虽如此，你可以通过这个柜子来达到你的要求。您不能执行多层块，因为您有属于两个不同父级的块，而这在当前CSS/HTML结构中是不可能量化的。此外，您无法使最后一个块显示在右下角块的旁边

下面是一个结构的小演示，它能让你更接近你的要求：


div div{
边框：1px纯黑；
}

此块跨越一列和未知行。
此块跨越三列一行。
此块跨越一列和一行。
此块跨越一列和一行。
此块跨越一列和一行。
此块跨越三列一行。
在本例中，问题被简化，因为我有固定高度的div。我保留了引导模板，并将col-md-9类分配给左下角的div，从顶部给它一定的空间。我知道这不是最好的方法，但它仍然是水平响应的

这是HTML代码：

<div class="row-fluid">
<div class="col-md-12">
    <div class="row">

        <div class="col-md-3 doubleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 doubleRow box upper">...</div>
    </div>
</div>

它在各种屏幕尺寸上的表现如何？我只需要在md上使用它，lgI无法立即想到任何方法可以使用默认的Bootstrap 3，甚至flexbox来实现这一点。这是一个有内容的可滚动页面，还是一个不滚动的完整页面应用？如果你不需要滚动，那么定位就很简单了。我不认为引导程序可以像那样跨行。它是可滚动的！这只包括rowspan，而不是colspan。这和Bootstrap做的是一样的，但是对于行，它们是不可连接的。你能提供你用来完成这项工作的代码吗，这样任何想做这项工作的人都可以看到它是如何完成的？听起来和我在回答的第三段中演示的一样。@Stack_孩子们，我明白了。您使用了固定定位来偏移块。我想它适用于绝对尺寸的设计，但它也有缺陷。您需要添加一个
@media
查询，以防止CSS以较小的分辨率影响它。以991px或更小的分辨率来看，你应该明白我的意思。我在更小的分辨率下没有任何问题，因为网格在小型和超小型设备中变化。。。这是我可以使用此解决方案的唯一原因。。。无论如何，谢谢你的帮助！“网格更改”是指网格被其他内容替换，还是引导外观改变了它？如果是后者，则使用默认引导响应设计，在较低分辨率下，第五个块完全被第六个块覆盖。这是因为
.upper
仍应用于第六个块。我可以想象，这种布局不再需要固定高度。如果是前者，好吧，那就忘了我说过什么我的意思是它被另一个配置所取代。。。(:
.singleRow{
    height:280px;
}

.doubleRow{
    height:560px;
    max-height:100%;
}

.upper{
    top: -280px;
    margin-bottom: -280px;  
}

.box {          
    border-style: solid;
    border-width: 5px;
    border-color:black;
    text-align: center;
    padding: 1%;
    position: relative;
}