如何为Bootstrap容器内所有列添加边框（仅用于开发可视化规划）

一、临时自定义CSS（快速生效） #

直接在开发环境的样式文件中添加以下代码，上线前注释或删除即可：

/* 开发专用：Bootstrap网格边框可视化 */
.col, .col-* {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.03);
  box-sizing: border-box; /* 防止边框撑开列宽 */
}

/* 可选：按响应式断点区分颜色，更易排查布局 */
@media (min-width: 576px) { .col-sm, .col-sm-* { border-color: rgba(255, 0, 0, 0.2); } }
@media (min-width: 768px) { .col-md, .col-md-* { border-color: rgba(0, 255, 0, 0.2); } }
@media (min-width: 992px) { .col-lg, .col-lg-* { border-color: rgba(0, 0, 255, 0.2); } }
@media (min-width: 1200px) { .col-xl, .col-xl-* { border-color: rgba(255, 255, 0, 0.2); } }

浅背景色+虚线边框不会遮挡内容，还能清晰看到每列的边界。

二、浏览器开发者工具临时调试（无需修改代码） #

打开浏览器控制台（F12），在「Elements」面板的「Styles」标签中，给.col类临时追加样式：

.col { border: 1px solid #ccc; }
.row { background-color: #f5f5f5; }

调试完成后刷新页面，样式自动消失，适合临时查看布局问题。

三、预编译环境下的规范方案（推荐） #

如果项目使用Sass/LESS编译Bootstrap，可通过条件编译控制样式仅在开发环境生效：

// 定义环境变量，上线时改为production
$development-mode: true;

@if $development-mode {
  .col, .col-* {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
  .row {
    margin: 5px 0;
    background-color: rgba(0, 0, 0, 0.02);
  }
}

上线前只需将$development-mode设为false，无需手动删除代码，更符合工程化规范。

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