Bootstrap - 跨越多行的列

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，这比 bootstrap.

更简单直接

Here 是 W3C 的文档。

您可以从 CSS-Tricks 中找到很酷的 article 以了解基础知识。

看看我下面的例子。

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

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

Bootstrap - 跨越多行的列

Bootstrap - span column across multiple rows

html

css

jquery

twitter-bootstrap

twitter-bootstrap-3