带引导网格系统的嵌套行?

时间:2014-07-09 16:49:55

标签: css html5 twitter-bootstrap grid grid-system

我想要一个2x2格式的4个较小图像的较大图像,如下所示:

Figure 1 Example

我最初的想法是把所有东西都放在一排。然后创建两列,并在第二列中创建两行和两列以创建1x1和2x2效果。

然而,这似乎不可能,或者我只是没有正确地做到这一点?

2 个答案:

答案 0 :(得分:271)

Bootstrap版本3.x

与往常一样,请阅读Bootstrap的精彩文档:

3.x文档https://getbootstrap.com/docs/3.3/css/#grid-nesting

确保父级别行位于.container元素内。只要您想要嵌套行,只需在列内部打开一个新的.row

这是一个简单的布局:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4.0版

4.0文档http://getbootstrap.com/docs/4.0/layout/grid/#nesting

这是4.0的更新版本,但您应该真正阅读网格上的整个文档部分,以便了解如何利用这一强大功能

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

小提琴演示jsFiddle 3.x | jsFiddle 4.0

这将是这样的(添加了一些样式):

screenshot

答案 1 :(得分:4)

添加@KyleMit所说的内容:

  • 考虑将col-md-*类用于更大的
  • 较小的
  • 的外部列和col-xs-*
  • 内柱

当您在不同的屏幕尺寸上查看页面时,这将非常有用。在小屏幕上使用:

  • 包裹更大的
  • 外部列将在保持较小的
  • 的同时发生
  • 内柱(如果可能)