ASP.NET迁移至ASP.NET (Core) MVC后网格列分隔线不显示问题咨询

问题产生原因 #

• HTML语法错误
  你提供的两段代码中所有col-md-4元素的style属性都缺少闭合双引号，会导致浏览器解析DOM结构、匹配样式规则时出错，自定义的边框样式无法正常生效。
• Bootstrap版本差异
  传统ASP.NET项目默认集成Bootstrap 3，多数旧模板自带列分隔线全局样式，或配合Bootstrap 3的浮动布局、默认槽宽配置可显示出分隔线；ASP.NET Core MVC默认集成Bootstrap 4/5，布局模型改为Flex，原生.border类默认不包含右侧边框，原有隐含的分隔线规则不再生效。
• CSS优先级/加载顺序错误
  如果你的自定义CSS代码放在Bootstrap样式引用之前，或者选择器优先级低于Bootstrap原生规则，你写的边框样式会被覆盖，无法正常渲染。

修复方案 #

1. 首先修正所有HTML语法错误，补全style属性的闭合双引号。
2. 调整CSS代码，提高选择器优先级，同时优化规则避免最后一列右侧多出多余边框：

/* 确保这段CSS放在Bootstrap样式引用的后面 */
#divider .col-md-4.border {
  border-right: 1px solid #ddd;
}
/* 去掉最后一列的右侧边框 */
#divider .col-md-4.border:last-child {
  border-right: none;
}

3. 如果需要分隔线高度和列高度保持一致，给row元素添加align-items-stretch类，开启Flex等高布局：

<div class="container-fluid" id="divider">
  <div class="row align-items-stretch">
    <div class="col-md-4 border" style="font-size:16px;">
      one column
      <p> test</p>
    </div>
    <div class="col-md-4 border" style="font-size:16px;">
      two column
      <p> test2</p>
    </div>
    <div class="col-md-4 border" style="font-size:16px;">
      three column
    </div>
  </div>
</div>

4. 若仍未生效，打开浏览器F12开发者工具，选中列元素查看计算样式中的border-right属性，确认是否被其他规则覆盖，针对性调整优先级即可。

内容的提问来源于stack exchange，提问作者dark.vador