CSS 如何让 Bootstrap 列跨越多行？

How can I get a Bootstrap column to span multiple rows?

提问by James Jeffery

I'm trying to figure out how to do the following grid with Bootstrap.

我试图弄清楚如何使用 Bootstrap 执行以下网格。

I'm not sure how I'd create the box (number 1) that spans two rows. The boxes are generated programmatically in the order they are laid out. Box 1 is a welcome message.

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

Any ideas on the best way to go with this?

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

回答by Mastergalen

For Bootstrap 3:

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

For Bootstrap 2:

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

See the demo on JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

请参阅 JSFiddle（引导程序 2）上的演示：http: //jsfiddle.net/SxcqH/52/

回答by disrvptor

Like the comments suggest, the solution is to use nested spans/rows.

就像评论建议的那样，解决方案是使用嵌套的跨度/行。

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

回答by Shareef Hadid

I believe the part regarding how to span rows has been answered thoroughly (i.e. by nesting rows), but I also ran into the issue of my nested rows not filling their container. While flexbox and negative margins are an option, a much easier solution is to use the predefined h-50class on the rowcontaining boxes 2, 3, 4, and 5.

我相信关于如何跨越行的部分已经得到了彻底的回答（即通过嵌套行），但我也遇到了嵌套行没有填充它们的容器的问题。虽然 flexbox 和负边距是一种选择，但更简单的解决方案是h-50在row包含框 2、3、4 和 5上使用预定义的类。

Note:I am using Bootstrap-4, I just wanted to share because I ran into the same problem and found this to be a more elegant solution :)

注意：我正在使用Bootstrap-4，我只是想分享，因为我遇到了同样的问题并发现这是一个更优雅的解决方案:)

回答by James Jeffery

The example below seemed to work. Just setting a height on the first element

下面的例子似乎有效。只需在第一个元素上设置高度

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

I can't help but thinking it's the wrong use of a row though.

我不禁认为这是对行的错误使用。

回答by Ps Naidu

<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>