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

【问题标题】：Bootstrap 5: Add gutter between rowsBootstrap 5：在行之间添加装订线
【发布时间】：2021-09-27 06:37:47
【问题描述】：

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

据我所知，排水沟 (https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters) 可以使用 g-* 或 gy-* 添加到 .row。在我的情况下，两者都不起作用。

【问题讨论】：

标签： html bootstrap-5 gutter

【解决方案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>

【讨论】：

像魅力一样工作。感谢您及时的回复！ :)