如何获得Bootstrap列以跨越多行？

小编典典

如何获得Bootstrap列以跨越多行？

css

我试图弄清楚如何用Bootstrap做下面的网格。

我不确定如何创建跨越两行的框（数字1）。这些框按照其排列顺序以编程方式生成。方框1是欢迎消息。

关于最佳方法的任何想法吗？

阅读 379

2020-05-16

共1个答案

小编典典

对于Bootstrap 3：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>





<div class="row">

    <div class="col-md-4">

        <div class="well">1

            <br/>

            <br/>

            <br/>

            <br/>

            <br/>

        </div>

    </div>

    <div class="col-md-8">

        <div class="row">

            <div class="col-md-6">

                <div class="well">2</div>

            </div>

            <div class="col-md-6">

                <div class="well">3</div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-6">

                <div class="well">4</div>

            </div>

            <div class="col-md-6">

                <div class="well">5</div>

            </div>

        </div>

    </div>

</div>

<div class="row">

    <div class="col-md-4">

        <div class="well">6</div>

    </div>

    <div class="col-md-4">

        <div class="well">7</div>

    </div>

    <div class="col-md-4">

        <div class="well">8</div>

    </div>

</div>

对于Bootstrap 2：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row-fluid">

    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>

    <div class="span8">

        <div class="row-fluid">

            <div class="span6"><div class="well">2</div></div>

            <div class="span6"><div class="well">3</div></div>

        </div>

        <div class="row-fluid">

            <div class="span6"><div class="well">4</div></div>

            <div class="span6"><div class="well">5</div></div>

        </div>

    </div>

</div>

<div class="row-fluid">

    <div class="span4">

        <div class="well">6</div>

    </div>

    <div class="span4">

        <div class="well">7</div>

    </div>

    <div class="span4">

        <div class="well">8</div>

    </div>

</div>

2020-05-16