【问题标题】:Why is there no vertical space between Bootstrap 4 rows为什么Bootstrap 4行之间没有垂直空间
【发布时间】:2018-03-09 05:16:36
【问题描述】:

我正在尝试从 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-4 twitter-bootstrap-4


【解决方案1】:

引导程序 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

【讨论】:

    猜你喜欢
    • 2018-08-16
    • 1970-01-01
    • 2021-03-19
    • 2017-12-17
    • 1970-01-01
    • 2015-10-01
    • 2014-02-12
    • 2017-09-10
    • 1970-01-01
    相关资源
    最近更新 更多