Question

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

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

enter image description here

这是我的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

试试这段代码：

<div class="container">
<h1>TEST</h1>
<div class="row">
<div class="col-md-offset-10"></div>
<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>
    </div>
    <div class="row">
    <div class="col-md-offset-10"></div>
    <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>
    </div>
    <div class="row">
    <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>



         <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>

Answer 2

试试这个，我刚刚添加了一个面板：

    <div class="container">
 <h1> TEST </h1>
<div class="row">
<div class="col-md-offset-10"></div>
<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>
    </div>
    <div class="row">
<div class="col-md-offset-10"></div>
<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>
    </div>

    <div class="row">
    <div class="col-md-offset-10"></div>
    <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>
    </div>
    <div class="row">
    <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>



         <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-footerenter code here">
                FOOTER
            </div>
        </div>
    </div>
    </div>
</div>

Answer 3

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

1）使用flexbox大小调整..

http://www.bootply.com/125623

缺点是所有浏览器都不支持<尚未

2）在＆＃34; SPAN ME＆＃34;上使用高度100％小组和它的容器..

http://www.bootply.com/125613

缺点是它设置为浏览器的100％高度，而不是左侧col-md-2的高度

Bootstrap 3：跨越网格中的行

3 个答案: