使用引导网格系统嵌套行? [英] Nested rows with bootstrap grid system?

查看：29
本文介绍了使用引导网格系统嵌套行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

然而，这似乎是不可能的，或者我只是没有正确地做?

解决方案

Bootstrap Version 3.x

一如既往，阅读 Bootstrap 的优秀文档:

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

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

这是一个简单的布局:

<div class="row"><div class="col-xs-6"><div class="big-box">image</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>

引导程序 4.0 版

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

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

<div class="row"><div class="col big-box">图片
<div class="col"><div class="row"><div class="col mini-box">1</div><div class="col mini-box">2</div>

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

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

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

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

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

As always, read Bootstrap's great documentation:

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

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.

Here's a simple layout to work from:

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

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

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>

Demo in Fiddle jsFiddle 3.x | jsFiddle 4.0

Which will look like this (with a little bit of added styling):

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆