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

158

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

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

在此处输入图片说明

有什么最好的方法吗？

css twitter-bootstrap

— 詹姆斯·杰弗里（James Jeffery）
source

1

twitter.github.io/bootstrap/scaffolding.html#gridSystem，您可以嵌套Bootstrap网格系统。

— TheHippo 2013年

1

那么创建2行而不是3行，将2行嵌套在第一行中？当以编程方式生成框时，这可能会出现问题。

— 詹姆斯·杰弗瑞

1

不知道它是否可行，但是将pull-left类添加到所有盒子中是否可行？它不会使框1的高度与2 + 4的高度相同，但是在设置高度时应该允许它工作。

— 冰雹

冰雹，如果可以的话，请回答，否则，我将粘贴我的代码。它至少在Chrome上有效。需要在其他浏览器中进行测试。

— 詹姆斯·杰弗里

@Hailwood实际上，不需要向左拉。只需在第一个元素上设置高度即可。

— James Jeffery

164

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

展开摘要

参见有关JSFiddle的演示（引导2）：http : //jsfiddle.net/SxcqH/52/

— 马斯特加伦
source

当第一个盒子长大时，如何使第四个盒子和第五个盒子填充行的高度？

— 2015年

2

stackoverflow.com/questions/19695784/...

— Mastergalen

这个例子不太奏效，第一列的底部边缘与其余部分略有偏离。

— JackKalish16年

这是一个很好的答案，但是如果第5栏也需要扩展到第3行，又如何动态地扩展到第3行呢？

— Misha'el

@ Misha'el这很简单，只需执行他在方框1中所做的操作，然后将其应用于方框3/5。应该有3列大小相等的列，外面的只有1行，里面的只有两行。

— 内森·威廉姆斯

17

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

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

— 展示者
source

1

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

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

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

— 詹姆斯·杰弗里（James Jeffery）
source

1

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

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

— Shareef哈迪德
source

0

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

— 奈杜
source