如何实现Bootstrap两列布局：左列向左满宽、右列保持容器固定宽度

这个需求完全可以实现，核心是适配Bootstrap标准container的各断点宽度规则，修改后可直接运行的代码如下：

修改后的CSS #

/* 父容器实现两列并排 */
.resellerblockwrap {
  display: flex;
  width: 100%;
}

.divresellerleft {
  flex: 0 0 40%; /* 可按需调整左侧占比 */
  min-height: 600px;
  background-color: #eeeeee;
  position: relative;
  display: flex;
  align-items: center;
  /* 下方padding-left是让左侧内容和全局container左边缘对齐，不需要可直接删除，不影响背景延伸到视口最左 */
  padding-left: calc((100vw - 1140px) / 2);
}

.divresellerright {
  flex: 1;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 15px;
  padding-left: 5%; /* 可替换为你原来的140px固定值 */
  /* 匹配Bootstrap xl断点container最大宽度 */
  max-width: 1140px;
  margin: 0 auto;
}

/* 适配Bootstrap各断点的container宽度 */
@media (max-width: 1199.98px) {
  .divresellerright {
    max-width: 960px;
  }
  .divresellerleft {
    padding-left: calc((100vw - 960px) / 2);
  }
}
@media (max-width: 991.98px) {
  .divresellerright {
    max-width: 720px;
  }
  .divresellerleft {
    padding-left: calc((100vw - 720px) / 2);
  }
}
@media (max-width: 767.98px) {
  .divresellerright {
    max-width: 540px;
  }
  .divresellerleft {
    padding-left: calc((100vw - 540px) / 2);
  }
}
@media (max-width: 575.98px) {
  .divresellerright {
    max-width: 100%;
    padding-left: 15px;
  }
  .divresellerleft {
    padding-left: 15px;
  }
  /* 小屏幕下可选择堆叠布局，不需要可删除 */
  .resellerblockwrap {
    flex-direction: column;
  }
  .divresellerleft {
    flex: 0 0 auto;
    width: 100%;
  }
}

修改后的HTML #

仅需删除右侧div上多余的row类即可，其余代码无需改动：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container-fluid bannernopadd">
  <div class="resellerblockwrap">
    <div class="divresellerleft">
      <img src="https://via.placeholder.com/80" alt="socialmedia">
    </div>
    
    <div class="divresellerright">
      <div class="insidekopje">
        <h1>Snel verdiend</h1>
        
        <span>Bouw aan je merk. Groei met ons mee. Zo worden we samen sterk.</span>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

核心逻辑说明 #

• 外层保持container-fluid无内边距的特性，保证左侧div的背景可以直接延伸到视口最左侧
• 右侧div的max-width严格匹配Bootstrap各断点下标准container的最大宽度，通过margin: 0 auto居中后，右边缘会和全局标准container的右边界完全对齐
• 左侧div的padding-left是可选配置，保留的话可以让左侧的内容（而非背景）和全局container的左边缘对齐，和右侧内容保持统一的内容安全区

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