为每列使用不同的引导容器

Question

我想在引导程序中有两列，它们都使用不同容器的最大宽度。

在这种情况下绝对位置的问题是容器不知道内容的高度是多少。所以这不是一个选择。内容物应超出容器的高度。

<div class="container--col-1 container-large--col-2">
   <div class="row">
     <div class="col-6">
         COL1 should have the max-width of .container (1320px)
     </div>
     <div class="col-6">
         COL2 should have the max-width of .container-large (1920px)
     </div>
   </div>
</div>

如何使用 Bootstrap 5 来完成此操作？这可能吗？

Answer 1

为什么不使用内联样式，因为您已经知道

max-width

的绝对数字？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container--col-1 container-large--col-2">
   <div class="row">
     <div class="col-6" style='max-width: 1320px'>
         COL1 should have the max-width of .container (1320px)
     </div>
     <div class="col-6" style='max-width: 1920px'>
         COL2 should have the max-width of .container-large (1920px)
     </div>
   </div>
</div>