Bootstrap 5：在行之间添加装订线

Question

我正在尝试使用 Bootstrap 5 在两行之间添加垂直间距。但是正如您在 jsfiddle 中看到的那样，没有装订线。有人知道这里出了什么问题吗？

据我所知，可以使用 g-* 或 gy-* 将装订线 (https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters) 添加到 .row。 None 两者都适用于我的情况。

Answer 1

您需要两个 div 和 gy-3。将它们放在一起：

 <div class="row gy-3">
        <div class="col-12">
            First part
        </div>
        <div class="col-12">
            second part
        </div>
    </div>

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
    <h1>Devices Demo!</h1>

    <div class="container overflow-hidden">
        <div class="row gy-3">
            <div class="col-12">
                <ul id="device-list" class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>

            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        Add new device
                    </div>
                    <div class="card-body">
                        <form>

                            <div class="row mb-3">
                                <label for="deviceName" class="form-label col-sm-2">Device Name</label>
                                <input type="name" class="form-control col-sm-10" id="deviceName" placeholder="Network Switch">
                            </div>

                            <button type="submit" class="btn btn-primary">Sign in</button>

                        </form>
                    </div>
                </div>
            </div>

        </div>



    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 5：在行之间添加装订线

Bootstrap 5: Add gutter between rows

html

gutter

bootstrap-5