时间戳

首页 > 解决方案 > Bootstrap 使用另一列的空间

html - Bootstrap 使用另一列的空间

问题描述

我目前有一个反应项目，其中一个页面左侧有一个侧边栏，占据容器的 3 个列空间。

我有页面的剩余宽度，主要内容使用了另外 8 列。

侧边栏只有 7-8 个链接。页面的主要内容高度仅占 8 列。我需要的是当主要内容高度下降到侧边栏下方时，内容将填充侧边栏下方剩余的空白，而不是直接向下继续，侧边栏下方留下空白。

我在jsfiddle here中制作了一个虚拟 html 代码。我需要的是占用剩余容器空间的主要内容，包括在此图像中的侧边栏下方。（使用 Photoshop 编辑的图像，抱歉布局错误）

我大约搜索了 2 个小时，但找不到答案，或者我不知道如何表达我正在寻找的内容。

代码：`

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



    <style>
        .container {
            margin-top: 50px;
        }

        li {
            margin: 30px;
        }
        .main-text {
            border: 3px dashed red;
            padding: 20px;
        }
        .overflow-text {
            border: 3px solid blue;
            padding: 20px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 ">
                <ul style="border: 2px solid black">
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>

            <div class="col-md-8">
                <div class="main-text">
                    <h3>Main Content</h3>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. In tempora libero
                        placeat culpa nostrum dignissimos deserunt nisi dolorum dolore repudiandae necessitatibus
                        numquam architecto laudantium, asperiores, tenetur exercitationem molestias quo explicabo
                        officia sequi ad. Qui fugiat praesentium reiciendis nulla officia, debitis eveniet,
                        reprehenderit id nisi assumenda, nemo perferendis corporis magnam! Voluptatem nam sapiente,
                        tempore molestiae aspernatur voluptatibus impedit! Omnis facilis ut, vel rerum doloremque,
                        sunt
                        consequatur quaerat eligendi soluta, ratione accusantium hic saepe officia maiores enim
                        voluptate id? Neque, enim ipsam rerum, praesentium, autem eaque similique voluptas ratione
                        culpa
                        impedit harum dolor consequatur voluptatem eveniet nesciunt itaque doloremque aperiam
                        repellat
                        facilis incidunt atque animi voluptatum ex! Adipisci vitae autem deserunt vero porro amet
                        modi
                        omnis quidem aliquam tempore sit cupiditate eos obcaecati nostrum reprehenderit, harum
                        fugiat!
                        Est fugit expedita exercitationem mollitia nulla nemo iure esse deserunt! Nostrum laboriosam
                        doloribus molestiae qui aut excepturi, impedit nulla quam sint quisquam veritatis id
                        expedita,
                        velit dolores voluptates quos ipsam tempore nihil consectetur repudiandae. Cum recusandae
                        laboriosam facere numquam laudantium! Unde deleniti delectus facilis, quaerat dolorem quas
                        pariatur repellat. Unde voluptatibus atque aliquid amet, eaque hic dicta facere vitae eius?
                        Tempora hic pariatur vel reiciendis vitae, rerum necessitatibus repellendus, culpa
                        perspiciatis
                        maxime voluptatibus. In error reiciendis, aliquid illo aperiam, magnam optio ipsam, ratione
                        quam
                        perspiciatis dolorum minima repellat possimus quod dolore ea? Ea inventore perspiciatis esse
                        est
                        cum fuga praesentium sed, eum totam dolor quas accusamus iusto aperiam veritatis id, culpa
                        neque
                        omnis mollitia nostrum repudiandae, optio sit explicabo accusantium illo. Suscipit libero
                        distinctio rem quas non eveniet recusandae! Ipsum tempora cumque deserunt, perferendis
                        eligendi
                        nisi accusantium fugiat exercitationem rem qui expedita labore quam ea quasi voluptatum et
                        eos
                        alias atque, consequuntur repellat vero! Incidunt, reprehenderit cupiditate at, deserunt
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis fugiat omnis sequi
                        pariatur. Accusantium odit aut error. Iusto quos modi temporibus, libero minus, laboriosam
                        veritatis dignissimos laborum ullam ea pariatur nihil blanditiis nobis sapiente doloremque
                        illo explicabo! Sapiente quaerat iure dignissimos, deserunt illum delectus aperiam accusamus
                        accusantium adipisci libero eveniet.

                    </p>
                </div>

            </div>
        </div>


    </div>

</body>
`

标签： htmlcssbootstrap-4flexboxgrid

解决方案

我不确定您是否可以通过将链接放在一列中并将文本放在另一列中来做您想做的事情，但是您可以将它们分成单独的部分，然后浮动链接 div 以进行更大的显示。

.container {
    margin-top: 50px;
}

li {
    margin: 30px;
}

.main-text {
    border: 3px dashed red;
    padding: 20px;
}

.overflow-text {
    border: 3px solid blue;
    padding: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="float-md-start me-md-3">
                    <ul class="mb-1" style="border: 2px solid black">
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                        <li><a href="https://google.com">List item</a></li>
                    </ul>
                </div>
                <div class="main-text">
                    <h3>Main Content</h3>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. In tempora libero placeat culpa nostrum dignissimos deserunt nisi dolorum dolore repudiandae necessitatibus numquam architecto laudantium, asperiores, tenetur exercitationem molestias quo explicabo officia sequi ad. Qui fugiat praesentium reiciendis nulla officia, debitis eveniet, reprehenderit id nisi assumenda, nemo perferendis corporis magnam! Voluptatem nam sapiente, tempore molestiae aspernatur voluptatibus impedit! Omnis facilis ut, vel rerum doloremque, sunt consequatur quaerat eligendi soluta, ratione accusantium hic saepe officia maiores enim voluptate id? Neque, enim ipsam rerum, praesentium, autem eaque similique voluptas ratione culpa impedit harum dolor consequatur voluptatem eveniet nesciunt itaque doloremque aperiam repellat facilis incidunt atque animi voluptatum ex! Adipisci vitae autem deserunt vero porro amet modi omnis quidem aliquam tempore sit cupiditate eos obcaecati nostrum reprehenderit, harum fugiat! Est fugit expedita exercitationem mollitia nulla nemo iure esse deserunt! Nostrum laboriosam doloribus molestiae qui aut excepturi, impedit nulla quam sint quisquam veritatis id expedita, velit dolores voluptates quos ipsam tempore nihil consectetur repudiandae. Cum recusandae laboriosam facere numquam laudantium! Unde deleniti delectus facilis, quaerat dolorem quas pariatur repellat. Unde voluptatibus atque aliquid amet, eaque hic dicta facere vitae eius? Tempora hic pariatur vel reiciendis vitae, rerum necessitatibus repellendus, culpa perspiciatis maxime voluptatibus. In error reiciendis, aliquid illo aperiam, magnam optio ipsam, ratione quam perspiciatis dolorum minima repellat possimus quod dolore ea? Ea inventore perspiciatis esse est cum fuga praesentium sed, eum totam dolor quas accusamus iusto aperiam veritatis id, culpa neque omnis mollitia nostrum repudiandae, optio sit explicabo accusantium illo. Suscipit libero distinctio rem quas non eveniet recusandae! Ipsum tempora cumque deserunt, perferendis eligendi nisi accusantium fugiat exercitationem rem qui expedita labore quam ea quasi voluptatum et eos alias atque, consequuntur repellat vero! Incidunt, reprehenderit cupiditate at, deserunt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis fugiat omnis sequi pariatur. Accusantium odit aut error. Iusto quos modi temporibus, libero minus, laboriosam veritatis dignissimos laborum ullam ea pariatur nihil blanditiis nobis sapiente doloremque illo explicabo! Sapiente quaerat iure dignissimos, deserunt illum delectus aperiam accusamus accusantium adipisci libero eveniet.
                    </p>
                </div>
            </div>
        </div>
    </div>

推荐阅读