Bootstrap 5列对齐正常但边框错位问题求助

问题 #

使用Bootstrap 5搭建多行多列布局时，列与行的对齐正常，但部分列的边框无法和对应列对齐，示例代码如下：

CSS代码 #

.VI-border {
    border-top: 1px solid grey;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.VI-border-top {
    border-top: 1px solid grey;
}

.VI-border-bottom {
    border-bottom: 1px solid grey;
}

.VI-border-left {
    border-left: 1px solid grey;
}

.VI-border-right {
    border-right: 1px solid grey;
}

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<div class="row VI-border text-center">
  <div class="col-sm-1 VI-border-right VI-border-bottom" style="word-break: break-word;">
    VI 10
  </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Ammaloramento</div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">Gravità</div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Estensione</div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">Dettaglio</div>
    <div class="col-sm-2 offset-sm-1 VI-border-left VI-border-bottom">Segnalazioni</div>
</div>
<div class="row text-center">
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left">
        Ossidazione
    </div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">
        Lieve
    </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">
        75 %
    </div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">
        In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud
    </div>
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left" style="height: 22px;">
        Presenti: 0
    </div>
</div>

解决方案 #

方法1：强制盒模型统一 #

虽然Bootstrap默认已设置box-sizing: border-box，但自定义样式可能出现冲突，给所有边框类添加该属性，确保边框不会额外占用宽度导致错位：

.VI-border, .VI-border-top, .VI-border-bottom, .VI-border-left, .VI-border-right {
    box-sizing: border-box;
}

方法2：调整边框添加逻辑 #

错位根源是偏移列的边框重复添加，修改HTML的边框类使用方式：

• 移除第一行最后一列的VI-border-left，避免和父容器左侧边框、前一列右侧边框冲突
• 移除第二行首列的VI-border-left，让前一个偏移区域的边框由父容器或相邻列覆盖

修改后的HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<div class="row VI-border text-center">
  <div class="col-sm-1 VI-border-right VI-border-bottom" style="word-break: break-word;">
    VI 10
  </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Ammaloramento</div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">Gravità</div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Estensione</div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">Dettaglio</div>
    <div class="col-sm-2 offset-sm-1 VI-border-bottom">Segnalazioni</div>
</div>
<div class="row text-center">
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom">
        Ossidazione
    </div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">
        Lieve
    </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">
        75 %
    </div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">
        In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud
    </div>
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom" style="height: 22px;">
        Presenti: 0
    </div>
</div>

方法3：改用Bootstrap表格组件（推荐） #

这种带边框的多行多列布局本质是表格结构，直接使用Bootstrap内置的表格类，自动保证边框对齐且样式统一：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th style="width: 8.33%">VI 10</th>
      <th style="width: 16.66%">Ammaloramento</th>
      <th style="width: 8.33%">Gravità</th>
      <th style="width: 16.66%">Estensione</th>
      <th style="width: 25%">Dettaglio</th>
      <th style="width: 16.66%">Segnalazioni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>Ossidazione</td>
      <td>Lieve</td>
      <td>75 %</td>
      <td>In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</td>
      <td style="height: 22px;">Presenti: 0</td>
    </tr>
  </tbody>
</table>

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