为什么 Bootstrap 4 行之间没有垂直空间 [英] Why is there no vertical space between Bootstrap 4 rows

查看：14
本文介绍了为什么 Bootstrap 4 行之间没有垂直空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从 Bootstrap 3 迁移到 Bootstrap 4.默认情况下，Bootstrap 3 在行之间具有垂直空间，但在 Bootstrap 4 中并非如此.有人可以解释一下原因吗?还是我的 HTML 中缺少某些内容?

<div class="row"><div class="col-9"><div class="row"><div class="col"><div class="card"><div class="card-header">卡01
<div class="card-body">卡01

<div class="row"><div class="col"><div class="card"><div class="card-header">卡02

<div class="card-body">卡02

解决方案

Bootstrap 5(2021 年更新)

Bootstrap 5 具有 新的装订线类，专门用于调整装订线对于整行.此外，现在还有垂直装订线的概念来调整包裹在每行内的行和列之间的垂直间距.

引导程序 4(原始答案)

在 Bootstrap 4 中，行不再有 margin-bottom.使用新的间距工具 (mb-4).

请参阅https://stackoverflow.com/a/42960338/171456.

I am trying to migrate from Bootstrap 3 to Bootstrap 4. Bootstrap 3 had vertical space between rows by default, but this is not the case in Bootstrap 4. Can someone please explain why? Or am I missing something in my HTML?

<div class="container-fluid">
    <div class="row">
        <div class="col-9">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            Card01
                        </div>
                        <div class="card-body">
                            Card01
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            Card02
                        </div>
                        <div class="card-body">
                            Card02
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

解决方案

Bootstrap 5 (update 2021)

Bootstrap 5 has new gutter classes that are specifically designed to adjust the gutter for an entire row. Additionally, there is now the concept of vertical gutters to adjust the vertical spacing between rows and columns that wrap inside each row.

Bootstrap 4 (original answer)

Rows no longer have margin-bottom in Bootstrap 4. Use the new spacing utils (mb-4).

See https://stackoverflow.com/a/42960338/171456.

这篇关于为什么 Bootstrap 4 行之间没有垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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