React中Bootstrap如何去除container网格的最外层边框

问题场景 #

在React项目中使用Bootstrap构建3x3网格布局时，给所有单元格添加了深色全边框，需要移除网格最外围的外边框，仅保留内部单元格之间的分隔线。直接给外层容器添加border-0、border border-white类均不生效，外边框依然显示。
初始实现代码：

<div className='container mt-3  border border-white'>
  {[...Array(3).keys()].map((row) => (
    <div key={row} className='row'>
      {[...Array(3).keys()].map((col) => (
        <div key={col} className='border border-dark col'>
          <p>{row * 3 + col + 1}</p>
        </div>
      ))}
    </div>
  ))}
</div>

目标效果参考：

失效原因 #

之前的操作不生效本质是：边框直接加在每一个单元格元素上，外层容器的边框相关属性只能控制容器自身的边框样式，无法影响子单元格的边缘边框，自然达不到隐藏外边框的效果。

实现方案 #

方案1：条件判断移除边缘单元格的对应方向边框（推荐，无兼容问题） #

直接用Bootstrap自带的方位边框工具类，给处于网格边缘的单元格移除对应方向的边框即可，规则如下：

• 第一行所有单元格移除上边框：添加border-top-0类
• 最后一行所有单元格移除下边框：添加border-bottom-0类
• 第一列所有单元格移除左边框：Bootstrap4及以上版本用border-start-0，Bootstrap3版本用border-left-0
• 最后一列所有单元格移除右边框：Bootstrap4及以上版本用border-end-0，Bootstrap3版本用border-right-0
  修改后完整代码：

<div className='container mt-3'>
  {[...Array(3).keys()].map((row) => (
    <div key={row} className='row'>
      {[...Array(3).keys()].map((col) => {
        const cellClass = [
          'border border-dark col',
          row === 0 ? 'border-top-0' : '',
          row === 2 ? 'border-bottom-0' : '',
          col === 0 ? 'border-start-0' : '',
          col === 2 ? 'border-end-0' : ''
        ].filter(Boolean).join(' ');
        return (
          <div key={col} className={cellClass}>
            <p>{row * 3 + col + 1}</p>
          </div>
        )
      })}
    </div>
  ))}
</div>

方案2：负margin+容器裁切实现（代码更简洁） #

不想写条件判断的话，可以给外层容器加overflow-hidden类（对应样式overflow: hidden），再给所有单元格加1单位的负margin，把最外围的边框挤到容器可视区域外直接裁掉即可，注意给单元格内部内容加少量内边距避免被裁切：

{/* 注意：Bootstrap 4.x版本负margin用m-n1，Bootstrap5.x版本替换为-m-1 */}
<div className='container mt-3 overflow-hidden'>
  {[...Array(3).keys()].map((row) => (
    <div key={row} className='row m-0'>
      {[...Array(3).keys()].map((col) => (
        <div key={col} className='border border-dark col m-n1'>
          <p className='p-1'>{row * 3 + col + 1}</p>
        </div>
      ))}
    </div>
  ))}
</div>

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