bootstrap栅格默认无边框，需手动添加border类或css；直接使用.border易因padding、margin导致错位，推荐自定义样式或配合px-0/ps-pe调整内边距，并用gap替代边框实现列间间距。
Bootstrap栅格默认不渲染边框，必须手动加类或写CSS
Bootstrap 的 .row 和 .col-* 本身是纯布局容器，没有视觉边框。想看到“带边框的栅格”，不能指望框架自动画线——这是常见误解的起点。
最直接的做法是给列（.col）加 border 类或自定义边框样式。但要注意：Bootstrap 5+ 的 .border 工具类默认作用于整个元素盒模型，而栅格列有 padding 和负 margin，容易导致边框错位、重叠或漏缝。
- 别只加
.border到.col，先确认是否需要.border-0清除默认干扰 - 如果用
.row包裹多列，.row的margin-left: -15px（Bootstrap 4）或margin-inline-start: -0.75rem（Bootstrap 5）会让左侧边框被裁掉 - 更稳妥的方式是统一用
style="border: 1px solid #dee2e6;"写在.col上，避开工具类的盒模型副作用
用 border 工具类时，必须配合 px-*/py-* 调整内边距
Bootstrap 的 .col 默认带 padding-left 和 padding-right（如 .px-3），边框会画在 padding 区域外侧。这意味着：边框看起来“缩进”了，列内容和边框之间有空白，且相邻列的边框会紧贴甚至重叠。
要让边框紧贴内容、列与列之间留出清晰间隙，得主动调整 padding：
- 移除默认左右内边距：
px-0 - 给内容区域补内边距（可选）：
ps-3 pe-3（Bootstrap 5）或pl-3 pr-3（Bootstrap 4） - 若需列间空隙，别依赖边框间距，改用
gap（Bootstrap 5.3+ 支持.row.gap-3）或外边距类如me-3
示例：<div class="col border border-secondary px-0 ps-3 pe-3">内容</div>
响应式边框控制要靠断点前缀，不能只写 border
加了 .border 就全屏显示边框，但实际开发中常需要“桌面端显边框、移动端隐藏”或“仅在 md 以上加右边界”。Bootstrap 的响应式工具类必须显式声明断点。
-
.border= 所有尺寸都生效；.border-md= 仅 ≥768px 显示边框 - 方向控制也支持断点：
.border-end-sm表示小屏及以上才加右边框 - 注意：
.border-0没有响应式变体，要实现“大屏无边框、小屏有”，得组合使用：.border.border-md-0
错误写法：<div class="col border d-md-none"> —— 这会把整列在中屏隐藏，不是隐藏边框
<h3>用 CSS 自定义比堆砌工具类更可控，尤其涉及圆角、阴影或细线</h3>
<p>Bootstrap 工具类覆盖不了所有视觉需求：比如 0.5px 细边框、<code>box-shadow 模拟立体分隔、border-radius 配合栅格圆角等。硬套 .border + .rounded 容易失真，因为 .rounded 作用于整个元素，而栅格列在不同断点下宽度变化，圆角位置可能错乱。
推荐做法是写轻量级自定义类，明确绑定到栅格语义：
.grid-col-bordered {
border: 0.5px solid #e9ecef;
border-radius: 4px;
}
.grid-col-bordered:focus-within {
outline: 2px solid #0d6efd;
}
这样既避免工具类耦合，又方便后续统一调整（比如换主题色只需改一处 CSS 变量）。
真正麻烦的是嵌套栅格 + 边框 + flex 对齐混合场景：此时 .row 的 display: flex 和 flex-wrap 会和边框 box-sizing 相互影响，建议优先用 gap 替代边框做分隔，边框只用于强调区块边界，不承担布局职责
