Bootstrap 列嵌套 [英] Bootstrap column nesting

查看：45
本文介绍了Bootstrap 列嵌套的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 Bootstrap 中有以下列布局

<div class="row"><div class="col-sm-4">
<div class="col-sm-8">

这会在左侧创建 1/3 列，在左侧创建 2/3 列.

我真正想要的是将列分层，以便左 (col-sm-4) 列位于 col-sm-12 列的顶部，如下所示:

Bootstrap 的网格可以实现这一点吗?

解决方案

您绝对可以嵌套列，但一定要为每个嵌套级别包含一个新的 .row 元素.这避免了必须像之前的答案所建议的那样添加额外的类和 CSS.

大多数人没有意识到的是，Bootstrap 的 .row 和 .col-* 类协同工作以清除浮动并均匀填充.

不需要 CSS:

<div class="row"><!-- 12 列元素--><div class="col-sm-12"><!-- 附加行元素--><div class="row"><!-- 4 col 元素--><div class="col-sm-4">

I have the following column layout in Bootstrap

<div class="container">
    <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
        </div>
    </div>
</div>

This creates a 1/3rd column on the left and a 2/3rds column on the left.

What I actually want is to layer the columns so the left (col-sm-4) column would sit on top of a col-sm-12 column, something like this:

Is this possible with Bootstrap's grid?

解决方案

You can definitely nest columns, but be sure to include a new .row element for each level of nesting. This avoids having to add additional classes and CSS as previous answers have suggested.

What most people don't realize is that Bootstrap's .row and .col-* classes work together to clear floats and even out padding.

No CSS needed:

<div class="container">
    <div class="row">
        <!-- 12 col element -->
        <div class="col-sm-12">
            <!-- additional row element -->
            <div class="row">
                <!-- 4 col element -->
                <div class="col-sm-4">
                </div>
            </div>
        </div>
    </div>
</div>

这篇关于Bootstrap 列嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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