1. 首页
  2. 问题
  3. 如何让 Bootstrap 列跨越多行？
小编典典

如何让 Bootstrap 列跨越多行？

all

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

我不确定如何创建跨越两行的框（编号 1）。这些框是按照它们的布局顺序以编程方式生成的。方框 1 是欢迎信息。

在此处输入图像描述

关于最好的方法的任何想法？


阅读 72

收藏
2022-08-05

共1个答案

小编典典

对于引导程序 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>

对于引导程序 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>

请参阅 JSFiddle (Bootstrap 2) 上的演示：http:
//jsfiddle.net/SxcqH/52/

2022-08-05