Bootstrap中col-md-12未占满容器宽度的原因及解决方法

嘿，我来帮你搞定这个布局问题！你遇到的col-12没占满容器宽度的情况，大概率是Bootstrap栅格系统的嵌套规则没遵守导致的，我之前也踩过这个坑，太容易忽略了！

核心原因 #

看你的代码结构，第二个<div class="row">直接嵌套在了第一个row里面，但Bootstrap的栅格系统有个硬性规则：所有row必须是col类元素的直接子元素，不能直接把row放在另一个row里。

因为Bootstrap的row默认带有负的左右外边距（margin-left: -15px; margin-right: -15px;），而col默认有左右内边距（padding-left: 15px; padding-right: 15px;），两者配合才能让布局对齐。如果直接嵌套row，它的负margin会让它没法继承父row的宽度，里面的col-12自然也没法占满整个容器。

修正方法 #

把第二个row用一个col-12包裹起来，让栅格结构符合container -> row -> col -> row -> col的嵌套逻辑，具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <!-- 记得引入Bootstrap的CSS文件 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html,body{ height:100%; }
    .contenedor_centrado {
      /* 保留你的自定义样式 */
    }
    .b { 
      /* 示例样式，方便你直观看到宽度变化 */
      background-color: #f0f0f0;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container h-100">
    <div class="row h-100 d-flex justify-content-center align-items-center contenedor_centrado">
      <!-- 新增col-12包裹内部row，修复嵌套结构 -->
      <div class="col-12">
        <div class="row">
          <div class="col-12 col-md-12 b">holi1</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

额外排查点 #

如果修正后还是没解决，你可以检查这两点：

• 有没有自定义CSS（比如contenedor_centrado或者b类）给元素加了width、max-width或者额外padding，导致宽度被限制？
• 是否正确引入了Bootstrap的CSS文件？如果没引入，栅格类的样式不会生效，col-12也就不会有占满宽度的效果。

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