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

Nested rows with bootstrap grid system?(带有引导网格系统的嵌套行?)

问题描述

我想要 1 个较大的图像和 4 个较小的图像，格式为 2x2，如下所示:

I want 1 larger image with 4 smaller images in a 2x2 format like this:

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

My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect.

但是，这似乎是不可能的，还是我做的不对?

However, this doesn't seem to be possible, or I am just not doing it correctly?

推荐答案

Bootstrap Version 3.x

和往常一样，阅读 Bootstrap 的精彩文档:

Bootstrap Version 3.x

As always, read Bootstrap's great documentation:

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

确保父级行位于 .container 元素内.每当您想嵌套行时，只需在您的列内打开一个新的 .row.

Make sure the parent level row is inside of a .container element. Whenever you'd like to nest rows, just open up a new .row inside of your column.

这是一个简单的布局:

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

引导程序版本 4.0

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

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

Here's an updated version for 4.0, but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature

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

Fiddle 中的演示 jsFiddle 3.x |jsFiddle 4.0

看起来像这样(添加了一点样式):

这篇关于带有引导网格系统的嵌套行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！