Bootstrap fluid-container中col-xxl类额外内边距问题咨询

• 栅格嵌套不符合Bootstrap强制规范：Bootstrap栅格的.row类自带左右负外边距，作用是抵消列的左右内边距，保证列内容和容器边缘对齐，因此**.row的直接子元素只能是.col-列类元素，不能直接嵌套另一个.row*。你的代码中包裹col-xxl的内层<div class="row">直接放在外层.row下，没有外层列的内边距抵消负边距，内层row会向左右溢出，内部的两个col-xxl自然会出现内边距错位、和其他列不对齐的问题，这也是你误以为是col-xxl类本身异常的核心原因——其他断点的col都是直接作为row的直接子元素，结构正确，只有xxl列组的父级结构错误。
• 版本兼容风险：col-xxl是Bootstrap 5新增的断点类（对应≥1400px屏幕宽度），Bootstrap 4最高仅支持到col-xl断点（≥1200px），如果你引入的是Bootstrap 4的CSS资源，.col-xxl类没有任何内置栅格样式，不会被识别为栅格列，布局和内边距表现必然不符合预期。
• 自定义样式选择器不严谨：你写的[class*="col"]属性选择器会命中所有class名里带col字符串的元素，命中范围不可控；同时Bootstrap默认的.col-*类自带左右0.75rem的gutter内边距，你自定义的1rem内边距会和默认内边距叠加，导致内边距大小不符合预期。

• 修正栅格嵌套结构：所有嵌套的.row必须外层包裹一个占满整行的列（通常用col-12），抵消row的负边距后再放内部列。
• 确认Bootstrap版本：如果使用Bootstrap 4，要么升级到Bootstrap 5以支持xxl断点，要么将col-xxl替换为col-xl适配现有版本。
• 优化自定义样式选择器：使用更严谨的选择器精确匹配.col-*类，避免误命中，同时覆盖默认gutter内边距，防止样式叠加。

修正后的可运行代码如下：

<style>
/* 精确匹配col-开头的列类，覆盖默认gutter内边距 */
[class^="col-"], [class*=" col-"] {
  padding: 1rem;
  background-color: #33b5e5;
  border: 2px solid #fff;
  color: #fff;
}
</style>
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="container-fluid text-center">
  <div class="row">
    <!-- 嵌套row外层必须包裹整行列，抵消负边距 -->
    <div class="col-12">
      <div class="row">
        <div class="col-xxl">col1-xxl</div>
        <div class="col-xxl">col2-xxl</div>
      </div>
    </div>
    <div class="col-xl">col1-xl</div>
    <div class="col-xl">col2-xl</div>
  </div>
  <div class="row">
    <div class="col-lg">col1-lg</div>
    <div class="col-lg">col2-lg</div>
  </div>
  <div class="row">
    <div class="col-md">col1-md</div>
    <div class="col-md">col2-md</div>
  </div>
  <div class="row">
    <div class="col-sm">col1-sm</div>
    <div class="col-sm">col2-sm</div>
  </div>
</div>

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