如何解决Bootstrap 4:一行中的列之间的间距
这个布局几乎就在那里,但我无法在一行中的列 div 之间出现装订线(右侧,绿色)。包含所有行(蓝色)的 div 宽度的配置也很麻烦。代码在 this 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>
解决方法
如果您希望在两列之间留出空白,您可以将列用作内容的容器,并在列内创建新的内容容器。这将为您提供两列之间的可见空间。
然后您可以将两个主列的高度设置为 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>
为了将来参考,最好使用代码段工具包含您的代码,而不是使用指向第三方网站的链接。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。