如何在col-12容器内正确对齐两个col-6的div元素

嘿，我之前做Bootstrap布局时也踩过一模一样的坑！咱们一步步来排查和解决：

• 首先，必须用row包裹你的列
  Bootstrap的栅格系统是靠row来管理列之间的间距（gutter）的，如果直接把col-6放在col-12里而没有外层的row，列的内边距会和容器的内边距冲突，要么挤在一起要么换行。正确的结构应该是这样：

<div class="col-12">
  <div class="row"> <!-- 这个row是关键！ -->
    <div class="col-6">第一列内容</div>
    <div class="col-6">第二列内容</div>
  </div>
</div>

row会自动给列添加左右的padding，同时抵消掉外层容器的padding，保证布局对齐。

• 排查自定义样式的冲突
  如果你自己写了额外的CSS，很可能不小心覆盖了Bootstrap的默认样式。比如给col-6加了margin: 0会去掉列间距，加了width: 100%会让列强行占满整行导致换行，或者用了float属性打乱了栅格的flex布局。
  建议用浏览器的开发者工具（F12）查看col-6元素的样式，看看有没有被自定义样式覆盖的情况，把冲突的样式去掉或者调整优先级。

• 检查列内内容是否溢出
  如果col-6里面的内容（比如长图片、无换行的长文本）超出了列的宽度，会把列撑大导致换行。解决办法：

  • 图片加img-fluid类，让它自适应列的宽度：<img src="xxx.jpg" class="img-fluid">
  • 长文本加text-wrap或者overflow-hidden类，强制换行或隐藏溢出内容：<div class="text-wrap">超长文本...</div>

• 确认Bootstrap CSS已正确引入
  这个虽然基础，但有时候会因为路径错误、只引入了Bootstrap JS没引CSS，导致栅格样式完全不生效。检查你的HTML头部是否有正确的CSS引入：

<link rel="stylesheet" href="path/to/bootstrap.min.css">

按照这几步排查，应该能解决你的问题啦！

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