css - Bootstrap 3 : Span rows in a grid

Question

我正在尝试做一些非常简单的事情，但仍然无法弄清楚 - 即使有我在网上看到的所有片段。

在下面的布局中，我想将右侧的面板横跨 3 行，我该如何实现？

这是我的 html:

<div class="container">
    <h1>TEST</h1>

    <div class="col-md-2">
        <div class="panel panel-default panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Title</h3>
            </div>
            <div class="panel-body">
                BODY
            </div>
            <div class="panel-footer">
                FOOTER
            </div>
        </div>
        <div class="panel panel-default panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Title</h3>
            </div>
            <div class="panel-body">
                BODY
            </div>
            <div class="panel-footer">
                FOOTER
            </div>
        </div>
        <div class="panel panel-default panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Title</h3>
            </div>
            <div class="panel-body">
                BODY
            </div>
            <div class="panel-footer">
                FOOTER
            </div>
        </div>
        <div class="panel panel-default panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Title</h3>
            </div>
            <div class="panel-body">
                BODY
            </div>
            <div class="panel-footer">
                FOOTER
            </div>
        </div>
    </div> <!--end grid -->

    <div class="row
        style="height: 300px;"
        ">
        <div class="col-md-8">
            <div class="panel panel-default panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Span ME</h3>
                </div>
                <div class="panel-body">
                    BODY
                </div>
                <div class="panel-footer">
                    FOOTER
                </div>
            </div>
        </div>
    </div>


</div>  

Answer 1

除非您使用 JavaScript/jquery 来计算 col-md-2 的高度，否则唯一的 CSS 选项是..

1) 使用 flexbox 大小..

http://www.bootply.com/125623

缺点是并非所有浏览器都支持(目前)

2) 在“SPAN ME”面板及其容器上使用高度 100%..

http://www.bootply.com/125613

缺点是设置成浏览器的100%高度，不是左边col-md-2

的高度