Hey there! Let's solve this layout challenge you're facing—getting a left section that respects Bootstrap's .container max-width constraints while the right section spans the full remaining width of the viewport. I’ve got two solid, Bootstrap-friendly solutions for you, both tested to work seamlessly with Bootstrap 4 and 5.

Core Idea #

Bootstrap’s .container uses built-in CSS variables like --bs-container-max-width that define its breakpoint-specific max widths (e.g., 1320px for xl screens, 1140px for lg, etc.). We can reuse this variable to sync our left section’s width perfectly with Bootstrap’s container behavior, while using flexbox or CSS Grid to make the right section fill the rest of the space.

Solution 1: Flexbox (Simplest, Bootstrap Native) #

This uses Bootstrap’s built-in flex utility classes, so you don’t need much custom CSS:

<!-- 主容器：占满视口高度（可选，根据你的需求调整） -->
<div class="d-flex min-vh-100">
  <!-- 左侧区域：遵循.container的最大宽度 -->
  <div class="left-content flex-shrink-0" style="max-width: var(--bs-container-max-width);">
    <!-- 内部用.container确保内容和标准Bootstrap容器对齐 -->
    <div class="container h-100 bg-light p-4">
      <h2>左侧容器内容</h2>
      <p>This section will match Bootstrap’s .container max-width at every breakpoint—no manual media queries needed!</p>
      <p>On small screens, it’ll shrink to fit the viewport, just like a regular .container.</p>
    </div>
  </div>
  <!-- 右侧区域：铺满剩余所有空间 -->
  <div class="right-content flex-grow-1 bg-dark text-white p-4">
    <h2>右侧全屏内容</h2>
    <p>This section will stretch to fill every pixel of remaining space on the right, no matter how big or small the screen gets.</p>
  </div>
</div>

How It Works: #

• d-flex: Turns the parent into a flex container, so the two sections sit side-by-side.
• flex-shrink-0: Prevents the left section from being compressed when the viewport is narrow.
• max-width: var(--bs-container-max-width): Directly uses Bootstrap’s internal variable to match the .container’s max width across all breakpoints.
• flex-grow-1: Tells the right section to automatically fill any remaining space in the flex container.

Solution 2: CSS Grid (More Explicit Layout Control) #

If you prefer Grid over Flexbox, this approach works just as well:

<div class="grid-layout min-vh-100">
  <!-- 左侧区域 -->
  <div class="left-grid">
    <div class="container h-100 bg-light p-4">
      <h2>左侧容器内容（Grid版）</h2>
      <p>Same .container-aligned behavior, using CSS Grid instead of flexbox.</p>
    </div>
  </div>
  <!-- 右侧区域 -->
  <div class="right-grid bg-dark text-white p-4">
    <h2>右侧全屏内容（Grid版）</h2>
  </div>
</div>

<style>
.grid-layout {
  display: grid;
  /* 第一列：最大宽度等于Bootstrap容器，最小宽度自适应内容；第二列：占剩余所有空间 */
  grid-template-columns: minmax(auto, var(--bs-container-max-width)) 1fr;
}
</style>

How It Works: #

• grid-template-columns: minmax(auto, var(--bs-container-max-width)) 1fr: Defines two columns—first column won’t exceed Bootstrap’s container max width, second column takes up the rest of the available space.

Optional: Stack on Small Screens #

If you want the sections to stack vertically on mobile (like Bootstrap’s default grid behavior), add a quick adjustment:

• For Flexbox: Replace d-flex with d-flex flex-column md:flex-row to stack on screens smaller than 768px, then switch to side-by-side on larger screens.
• For Grid: Add a media query to force single-column layout on mobile:

  @media (max-width: 767px) {
    .grid-layout {
      grid-template-columns: 1fr;
    }
  }
  

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