如何实现Bootstrap列的共享边框？适配响应式布局需求

要实现你需要的布局效果，需要调整列的边框、圆角样式，并利用Bootstrap的响应式断点和无间距行来解决边框重叠和圆角问题。以下是修正后的代码：

HTML代码 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" />
<div class="container-fluid mx-auto" style="max-width: 70%">
  <div class="row g-0">
    <!-- Left Column-->
    <div class="col-lg-8 d-flex align-items-center custom-left-column">
      <p>Left Column</p>
    </div>

    <!-- Right Column -->
    <div class="col-lg-4 d-flex align-items-center custom-right-column">
      <p>Right Column</p>
    </div>
  </div>
</div>

CSS代码 #

.custom-left-column {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px 10px 0 0;
}

.custom-right-column {
  border: 1px solid #ccc;
  border-top: none;
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 0 0 10px 10px;
}

@media (min-width: 992px) {
  .custom-left-column {
    border-radius: 10px 0 0 10px;
  }
  
  .custom-right-column {
    border-top: 1px solid #ccc;
    border-left: none;
    border-radius: 0 10px 10px 0;
  }
}

关键调整说明 #

• 移除列间距：给row添加g-0类，消除Bootstrap默认的列间距，确保两列在大屏幕下紧密贴合。
• 移动端堆叠布局：
  • 左侧列保留完整边框，仅设置顶部圆角，底部无圆角。
  • 右侧列移除顶部边框（避免与左侧列底部边框重叠），仅设置底部圆角，顶部无圆角。
• 大屏幕并排布局：
  • 左侧列调整圆角为左上、左下，右侧边框保留（作为两列之间的分隔线）。
  • 右侧列恢复顶部边框，移除左侧边框（避免与左侧列右侧边框重叠），调整圆角为右上、右下。

这样无论在大屏还是小屏布局下，整体容器都呈现1px边框和正确的圆角效果，列接触处的边框厚度始终为1px且无圆角。

内容的提问来源于stack exchange，提问作者spongy