Bootstrap 4: 一行中各列之间的间距

Question

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

它的核心非常通用；也许问题出在 overflow-y 滚动上？但我已经尝试了很多调整，但没有任何效果：

<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>

Answer 1

如果您希望在两栏之间有一个白色 space，您可以将您的栏用作内容的容器，并在栏内创建新的内容容器。这会给你一个可见的 space 在两列之间。

然后您可以将两个主要列设置为 100% 的高度以填充 space，并将您的 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>

为了将来参考，最好使用代码段工具包含您的代码，而不是使用 link 到第三方站点。

Bootstrap 4: 一行中各列之间的间距

Bootstrap 4: gutter between columns in a row

css

bootstrap-4

column-width

gutter