Bootstrap - 如何在具有固定像素的行中居中 col

Question

我有一个最大宽度必须为 960 像素的容器。容器内有一行最大宽度为 928px，里面有 2 个列。左列的最大宽度为 576 像素，右列的最大宽度为 352 像素。我怎样才能将 2 列居中，使它们正好位于容器的中间？ bootstrap 4 的诀窍是什么？

 <div class="d-flex justify-content-center align-self-center" style="max-width: 960px;">
  <div class="container" style="max-width:960px;">

   <div class="row" style="max-width:928px;">


     <div class="col" style="max-width:576px;"> 
      ... data ...
     </div>

     <div class="col" style="max-width:352px;"> 
     ... data ...
     </div>

    </div>
   </div>
 </div>

我制作了 2 张图片来展示问题所在以及我最终想要做什么（固定版本...）。非常感谢您的每一个回答！！！ Is now
Must be

Answer 1

假设您不需要容器的 min-width 或 min-height 并且您也需要它们垂直居中，这应该可以解决问题

.yellowBg {
  background-color: yellow;
}
  
.tomatoBg {
  background-color: tomato;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-center align-self-center" style="max-width: 960px; border: 2px solid black;">
  <div class="row" style="max-width:960px;">
    <div class="col d-flex justify-content-center align-items-center" style="max-width:928px;">
    
      <div class="col d-flex flex-row flex-wrap justify-content-start yellowBg" style="max-width:576px;"> 
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
        <p> stuff here </p>
      </div>
    
      <div class="col d-flex flex-row flex-wrap justify-content-start tomatoBg" style="max-width:352px;"> 
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
        <p> more stuff here </p>
      </div>
    </div>
  </div>
</div>