Bootstrap - 跨多行的跨列答案

【问题标题】：Bootstrap - span column across multiple rowsBootstrap - 跨多行的跨列
【发布时间】：2015-04-11 22:42:44
【问题描述】：

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

我已经设置了三个四个，但是我遇到了需要跨两行的 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>

【问题讨论】：

您可以发布您现有的代码或发布 JSFiddle 吗？
只需按列而不是按行更改您的思维和代码...左列、左列第二列、左列第三列等
@JacodeGroot 已发布。
像这样创建 5 列.. codeply.com/go/Pr00IzNgbQ
啊，我打败了它——我要添加它以使 Skellys 示例中的列居中，只需将 col-sm-offset-1 添加到第一个 col-sm-2 元素。

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：