0

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

https://jsfiddle.net/re4879wt/

据我了解排水沟（https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters）可以添加到.rowusingg-*或gy-*. 在我的情况下，两者都不起作用。

4

1 回答 1

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>

于 2021-07-19T15:40:35.360 回答