如何为三列Grid网格布局中的第二、第三列添加外边框

实现方案 #

你可以通过CSS子元素选择器直接选中第二、第三列添加边框，为了避免和Bootstrap自带的.container类样式冲突，建议先自定义Grid容器类名，修改后代码如下：

1. 调整CSS代码

/* 自定义Grid容器类，避免和Bootstrap的container冲突 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /* 可选：设置列间距，避免边框贴在一起 */
  gap: 12px;
  /* 列高度自动和最高列对齐，保证边框高度统一 */
  align-items: stretch;
}

/* 选中第二、第三列添加边框 */
.grid-container .column:nth-child(2),
.grid-container .column:nth-child(3) {
  /* 可自行调整边框粗细、颜色、圆角参数 */
  border: 1px solid #333;
  border-radius: 4px;
  /* 可选：添加内边距避免内容贴边 */
  padding: 10px;
}

2. 调整HTML容器类名

把原来的容器类从container改为自定义的grid-container即可：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="grid-container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

可选优化方案 #

如果你的列是动态渲染、数量不固定，可以给需要加边框的列单独加自定义类，比如给第二、第三列添加class="column with-border"，然后CSS写：

.with-border {
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px;
}

这样不会因为列顺序/数量变化导致边框加错位，维护性更高。

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