Bootstrap栅格列无法并排显示，多次尝试调整均未解决

解决思路 #

• 排查栅格系统样式冲突
  你外层代码用了container_12、grid_8这类类名，这是960栅格系统的典型命名规则，和Bootstrap4的栅格样式存在优先级冲突，大概率是覆盖了Bootstrap中col-6的width: 50%规则，导致列宽度变成100%自动换行。你可以打开开发者工具选中col-6元素，查看样式面板里Bootstrap的宽度规则是否被划掉失效。

• 确认Bootstrap CSS正确加载
  先检查浏览器网络面板中Bootstrap4的CSS文件是否加载成功，有没有出现404、跨域等加载失败的情况。如果CSS本身没有加载成功，栅格样式自然不会生效。

• 替换嵌套的container类
  Bootstrap的container类自带左右固定padding和最大宽度限制，你现在把它嵌套在已经定宽的grid_8容器内，很可能导致内部实际可用宽度不足，两个col-6加上间距的总宽度超过了容器可用宽度，触发自动换行。可以把内部的<div class="container">改成<div class="container-fluid p-0">，用流式容器适配外层宽度，同时去掉多余的内边距。

• 临时测试定位问题
  你可以给两个col-6添加临时行内样式<div class="col-6" style="width:50%;float:left">，测试是否能正常并排。如果可以生效，就确定是外部样式覆盖了Bootstrap的栅格规则，直接给你的这组栅格加自定义类提高优先级即可，示例代码如下：

/* 自定义样式写在Bootstrap CSS引入之后 */
.custom-card-grid .col-6 {
  width: 50% !important;
  flex: 0 0 50%;
  max-width: 50%;
}

然后给对应的row元素加类即可：<div class="row custom-card-grid">

内容的提问来源于stack exchange，提问作者Peter The Angular Dude