如何在Bootstrap 5中实现两列使用不同容器的最大宽度？

需求：希望在Bootstrap里设置一行的两列，分别使用不同容器的max-width；不能用绝对定位（因为会导致容器无法获取内容高度），要求内容能正常撑开容器高度。

示例代码：

<div class="container--col-1 container-large--col-2">
   <div class="row">
     <div class="col-6">
         COL1 应该使用 .container 的 max-width（1320px）
     </div>
     <div class="col-6">
         COL2 应该使用 .container-large 的 max-width（1920px）
     </div>
   </div>
</div>

期望效果（需合并为同一行）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6">
      <div style="background-color:blue;">
        COL1
      </div>
    </div>
  </div>
</div>

<div class="container-large">
  <div class="col-6 offset-6">
    <div style='background-color:green;'>
      COL2
    </div>
  </div>
</div>

请问该如何在Bootstrap 5中实现？是否可行？

这完全可行，核心思路是给两列内的内容容器分别应用对应容器的max-width规则，保留Bootstrap网格的流式布局特性，确保内容能正常撑开高度。

1. 定义自定义容器宽度规则 #

首先确保你有.container-large的样式（Bootstrap默认无此类），同时为列内内容容器定义基础样式：

/* 列内容容器的基础样式，对齐Bootstrap容器的内边距规则 */
.col-container {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

/* 对应默认.container的max-width（xl断点下1320px） */
@media (min-width: 1200px) {
  .col-container-default {
    max-width: 1320px;
  }
}

/* 自定义.container-large的max-width（xl断点下1920px） */
@media (min-width: 1200px) {
  .col-container-large {
    max-width: 1920px;
  }
}

2. 实现同行布局 #

直接用Bootstrap的row和col-6创建同行两列，然后给每列内的内容容器添加对应的自定义类：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

<style>
  .col-container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  @media (min-width: 1200px) {
    .col-container-default {
      max-width: 1320px;
    }
    .col-container-large {
      max-width: 1920px;
    }
  }
</style>

<div class="row">
  <!-- 第一列：应用默认.container的宽度限制 -->
  <div class="col-6">
    <div class="col-container col-container-default">
      <div style="background-color:blue; padding: 2rem;">
        COL1（max-width:1320px）
      </div>
    </div>
  </div>

  <!-- 第二列：应用自定义.container-large的宽度限制 -->
  <div class="col-6">
    <div class="col-container col-container-large">
      <div style="background-color:green; padding: 2rem;">
        COL2（max-width:1920px）
      </div>
    </div>
  </div>
</div>

3. 可选优化 #

如果需要调整两列的垂直对齐方式，给row添加Bootstrap的对齐类即可，比如align-items-center或align-items-stretch：

<div class="row align-items-stretch">
  <!-- 列内容 -->
</div>

原理说明 #

• 用col-6保证两列在同一行平分宽度，维持正常文档流
• 列内的col-container类负责应用对应容器的max-width，内容会在各自的宽度限制内展示
• 这种方式不会破坏布局流，内容自然撑开容器高度，完全避免了绝对定位带来的高度问题

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