我很难让我的专栏展开。
根据文档(https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment)，justify-content-between应该是我需要的。
但是我最终让我的列在默认位置，而不是向外推。
基本代码示例:
https://codepen.io/6a0a49af a3f9 - 4 e78 - 8 ccf - 91 d8d1b1f102/pen/qwkyjqm
我已经稍微改变了你的代码，以获得所需的效果。
在<div class="row">上我删除了一些不需要的样式。在<div class="col">上，我将其更改为color -4以设置宽度。因为bootstrap在12帧内工作。4 + 4留下4短，所以这是justify-content-between填充的空间。我还删除了你的css，因为它不需要。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body class="d-flex flex-column min-vh-100">
<!-- -->
<nav class="navbar navbar-light navbar-expand-md bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.svg" alt="">
</a>
<!-- -->
<div class="navbar-nav d-none d-md-flex">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">A</a>
<a class="nav-link" href="#">B</a>
<a class="nav-link" href="#">C</a>
<a class="nav-link" href="#">D</a>
<a class="nav-link" href="#">E</a>
</div>
<!-- -->
<span>
<a href="https://twitter.com/" rel="nofollow noopener noreferrer"><i
class="fab fa-twitter mx-2 gstwitterblue"></i></a>
<a href="https://www.linkedin.com/"
rel="nofollow noopener noreferrer"><i class="fab fa-linkedin mx-2 gslinkedinblue"></i></a>
</span>
</div>
</nav>
<main class="flex-fill">
<div class="container d-none d-md-flex flex-md-row">
<div class="row justify-content-between">
<div class="col-4">
<div class="card">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card gscustomwidth">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae. </p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Standard Footer -->
<footer class="bg-light py-3 d-none d-md-flex">
<div class="container d-flex justify-content-between">
<span class="text-dark fw-lighter">Copyright © 2020 Foobar Ltd. All rights reserved.</span>
<span class="text-dark fw-lighter"><a href="#" class="text-reset text-decoration-none">Legal
Information</a></span>
</div>
</footer>
</body>你想要的没有发生的原因是因为你没有给rowdiv一个完整的宽度。从您的代码中，将w-100添加到以下div:
<div class="row row-cols-1 row-cols-md-2 justify-content-between">