0

这种布局几乎就在那里，但我无法在连续的列 div 之间出现排水沟（右侧，绿色）。保存所有行（蓝色）的 div 宽度的配置也很麻烦。代码在这个 jsfiddle中，布局如下图所示。主要的右侧列将动态添加一些未知数量的项目。左侧及其项目是静态的。

它的核心非常通用。也许这是有问题的溢出滚动？但是我尝试了很多调整，但没有任何效果：

<div class="wrapper-right" style="max-height:80%; overflow-y: scroll">
 <div class="row mx-1 mb-1">
  <div class="col-6 item-right px-2">
    <p class="mt-0">item #1</p>
  </div>
  <div class="col-6 item-right px-2">
    <p class="mt-0">item #2</p>
  </div>
 </div>
 etc.
</div>

可滚动列中带有嵌套行的引导 4 布局

4

1 回答 1

1

如果您希望在两列之间留有空白，您可以将列用作内容容器并在列中创建新的内容容器。这将为您提供两列之间的可见空间。

然后，您可以将两个主要列的高度设置为 100% 以填充空间，并将content_right容器设置为 flex 和列的方向。从右包装器中删除所有样式（边框除外）并添加overflow: auto.

#banner {
    background-color: goldenrod;
    height: 20%;
    border: 1px solid red;
}

#content {
    border: 1px solid red;
    height: 77%;
    position: relative;
}

#content .row {
    border: 1px solid green;
}

#content_left {
    background-color: #ccc;
    height: 100%;
    overflow-y: auto;
}

#content_right {
    background-color: #ddd;
    height: 100%;
    position: relative;
    /* overflow-y: scroll; */
}

.item-left {
    min-height: 50px;
    background-color: yellow;
    ;
}

.item-right {
    min-height: 85px;
    background-color: beige;
    border-right: solid 0.375rem white;
    /* border: 2px dotted #ddd; */
}

.item-right + .item-right {
    border-left: solid 0.375rem white;
    border-right: none;
}

.wrapper-right {
    overflow: auto;
    border: 1px solid blue;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-1" style="height: calc(100vh - 12px); border: 1px solid #00ff00;">
    <div id="banner" class="w-100 my-1 p-2">
        <p>banner</p>
    </div>
    <div id="content" class="row mx-0">
        <div class="col-sm-6 h-100">
            <div id="content_left" class="p-2">
                <div class="h5 w-100" style="background:#fff; text-align:center;">Left</div>
                <div class="content-wrapper p-1">
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #1</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #2</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #3</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #4</p>
                    </div>
                    <div class="item-left mb-1 px-2">
                        <p class="mt-0">(l) item #5</p>
                    </div>
                </div>
            </div>

        </div> <!-- content_left-->
        <div class="col-sm-6 h-100">
            <div id="content_right" class=" d-flex flex-column p-2">
                <div class="h5 w-100" style="background:#fff; text-align:center;">Right</div>
                <div class="wrapper-right">
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p class="mt-0">(r) item #1</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p class="mt-0">(r) item #2</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #3</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #4</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #5</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #6</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #7</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #8</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #9</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #10</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #11</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #12</p>
                        </div>
                    </div>
                    <div class="row mx-1 mb-1">
                        <div class="col-6 item-right px-2">
                            <p>(r) item #13</p>
                        </div>
                        <div class="col-6 item-right px-2">
                            <p>(r) item #14</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- content_right -->
    </div> <!-- content -->
</div>

为了将来参考，最好使用代码段工具包含您的代码，而不是使用指向第三方网站的链接。

于 2021-05-13T23:34:25.283 回答