bootstrap-4 - 为什么 Bootstrap 4 行之间没有垂直空间

标签 bootstrap-4 twitter-bootstrap-4

我正在尝试从 Bootstrap 3 迁移到 Bootstrap 4。默认情况下,Bootstrap 3 在行之间有垂直空间,但在 Bootstrap 4 中不是这种情况。有人可以解释一下原因吗?还是我的 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(2021 年更新)
Bootstrap 5 具有 new gutter classes,专门设计用于调整整行的装订线。此外,现在有 垂直间距 的概念来调整包裹在每行内的行和列之间的垂直间距。

  • 使用 g-0 没有排水沟
  • 使用 g-(1-5) 通过间距单位调整水平和垂直间距
  • 使用 gy-* 调整垂直排水沟
  • 使用 gx-* 调整水平间距

  • Bootstrap 4(原始答案)
    Bootstrap 4 中的行不再有 margin-bottom。使用新的间距工具 ( mb-4 )。
    https://stackoverflow.com/a/42960338/171456

    关于bootstrap-4 - 为什么 Bootstrap 4 行之间没有垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46452586/

    相关文章:

    twitter-bootstrap-4 - 如何让holder.js与bootstrap 4一起使用?

    html - 如何在图像旁边对齐多行文本而不将其换行?

    bootstrap-4 - 纯文字轮播

    sass - 更改 Bootstrap 4 文本颜色

    javascript - 带有引导侧边栏的事件类

    javascript - Bootstrap 4 填写表单时实时表单验证

    twitter-bootstrap-4 - Bootstrap 4 选项卡在选项卡 ID 中使用前导数字时不会切换内容

    html - Bootstrap 图像背景覆盖容器内的整个宽度

    twitter-bootstrap - 如何仅使用 CSS 更改 Bootstrap 4 中字体的大小?

    javascript - 在 css 中将图像移到顶部