如何使引导列在元素溢出时自动调整大小

Question

我有一个BootStrap 5行，其列将始终保持不变，即使其中的内容溢出了该列。如何使其在内容大于列时，列的大小扩大？

​

​

正如您所看到的，列(紫色)让卡内的卡溢出，从而导致它们与其他卡碰撞。我想要的是，当列中的内容被绑定到溢出时，列就会展开。

行和列的HTML：

<div class="row">
        <div class="col">
            <h1 class="header">User</h1>
            <div class="card card-large border-0 me-1">
                <div class="card-body shadow">
                    <div class="row row-cols-2">
                        <div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
                            <i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
                        </div>
                        <div class="right-column">
                            <a class="header row pt-2">Username: </a>
                            <a class="header row pt-2">Plan: </a>
                            <a class="header row pt-2">Discord: </a>
                            <a class="header row pt-2">Date of registration: </a>
                            <a class="header row pt-2">Used searches: /</a>
                        </div>
                    </div>
                    <div class="mt-2">
                        <a class="btn shadow text-white me-1" style="background-color: #7289da">Link Discord</a>
                        <a class="btn btn-secondary shadow text-white me-1">Change password</a>
                        <a class="btn btn-danger shadow text-white" data-bs-toggle="modal" data-bs-target="#logout">Log out</a>

                        <div class="modal fade" id="logout" data-bs-backdrop="logout" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" style=" width: 25rem">
                                <div class="modal-content text-white">
                                <div class="modal-body" style="background-color: #0e0e0e">
                                    <div class="container">
                                        <div class="row justify-content-center">
                                            <div class="col-1" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
                                                <i class="fa-solid fa-triangle-exclamation" style="font-size: 50px;"></i>
                                            </div>
                                            <div class="col-8 mt-4">
                                                Are you sure you wish to log out?
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer border-0 justify-content-center" style="background-color: #0e0e0e">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button data-bs-dismiss="modal" type="button" class="btn btn-danger" @click="deleteCookie()">Log out</button>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="col">
            <h1 class="header">Plan</h1>
            <div class="card card-large border-0 me-1">
                <div class="card-body shadow">
                    <div class="row row-cols-2">
                        <div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
                            <i class="fa-solid fa-tag" style="font-size: 50px;"></i>
                        </div>
                        <div class="right-column">
                            <a class="header row pt-2">Plan: </a>
                            <a class="header row pt-2">Date of Purchase: </a>
                            <a class="header row pt-2">Date of Expiration: </a>
                        </div>
                    </div>
                    <div class="mt-2">
                        <a class="btn btn-primary shadow text-white me-1" @click="">Upgrade</a>
                        <a class="btn btn-danger shadow text-white">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <h1 class="header">API</h1>
            <div class="card card-large border-0 me-3">
                <div class="card-body shadow">
                    <div class="row row-cols-2">
                        <div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
                            <i class="fa-solid fa-code" style="font-size: 50px;"></i>
                        </div>
                        <div class="right-column">
                            <a class="header row pt-2">Used searches: /</a>
                        </div>
                    </div>
                    <div class="mt-2">
                        <a class="btn btn-secondary shadow text-white me-1 disabled">API docs</a>
                        <a class="btn btn-secondary shadow text-white me-1" onclick="">Copy API key</a>
                        <a class="btn btn-secondary shadow text-white">Regenerate API key</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

将col-lg-4添加到row列中，如下所示

<div class="row">
  <div class="col-lg-4">
    //content
  </div>
  <div class="col-lg-4">
    //content
  </div>
  <div class="col-lg-4">
    //content
  </div>
</div>

有关更多信息，请访问以下链接：https://getbootstrap.com/docs/5.2/layout/columns/#how-they-work