Bootstrap - 跨越多行的span列

Question

我需要构建一个类似于以下内容的网格布局：

我已经设置了三个，但遇到的情况是我需要跨越两行的div的行间距。第2行和第3行需要一个位于两行中心的对象。这有可能吗？

提前致谢！

编辑（代码）：

<style type="text/css">

    .fill-row-1 {
        width: 100%;
    }

    .fill-row-2 {
        width: 100%;
    }

    .fill-row-3 {
        width: 100%;
    }

    .fill-row-4 {
        width: 100%;
    }

    .circular-btn {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
    }

</style>

    <script type="text/javascript">

    $(document).ready(function () {
        var row1Height = $('#row1').height();
        $('.fill-row-1').css("height", row1Height);

        var row2Height = $('#row2').height();
        $('.fill-row-2').css("height", row2Height);

        var row3Height = $('#row3').height();
        $('.fill-row-3').css("height", row3Height);

        var row4Height = $('#row4').height();
        $('.fill-row-4').css("height", row4Height);
    });


    </script>

    <div class="row" id="row1" style="text-align:center;">
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#1"/>
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#4" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#2" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#5" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#3" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#6" />
            </div>
        </div>
    </div>
    <div class="col-md-2">

        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#1"/>
            </div>
        </div>

    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#2" />
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#3" />
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#1" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#4" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#2" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#5" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#3" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#6" />
            </div>
        </div>
    </div>
</div>
<div class="row" id="row2" style="text-align:center;">
    <div class="col-md-2">
        <input type="button" class="btn btn-default fill-row-2" value="#3" />
    </div>
    <div class="col-md-2">
        <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
    <div class="col-md-2 " >
            <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
    <div class="col-md-2">
        <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
</div>
<div class="row" id="row3">
    <div class="col-md-2">

    </div>
</div>
<div class="row" id="row4">
    <div class="col-md-2">

    </div>
</div>

Answer 1

您可以使用 flexbox ，这比引导程序更容易，更直接。

Here是W3C的文档。

你可以从CSS-Tricks中找到一个很酷的article来理解基础知识。

看看下面的例子。

＆＃13;

＆＃13;

body {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100%;
}
div {
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 3px;
}
.sc div {
  display: flex;
  background-color: lightgray;
}
#fx {
  height: 106px;

  background-color: lightblue;
}
section {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

＆＃13;

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section class=sc>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div id=fx></div>
  <div></div>
</section>

＆＃13;

＆＃13;

＆＃13;