引导列和justify-content-end
引导列和justify-content-end
提问于 2021-01-19 05:22:27
我很难让我的专栏分散开来。
根据文档(https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment)，justify-content-between应该是我所需要的。
但我最终让我的列处于它们的默认位置，而不是向外推。
基本代码示例：
https://codepen.io/6a0a49af-a3f9-4e78-8ccf-91d8d1b1f102/pen/QWKYJqM
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-19 08:11:40
为了达到预期的效果，我对您的代码做了一些修改。
在<div class="row">上，我删除了一些不需要的样式。在<div class="col">上，我将其更改为col4以设置宽度。由于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>
Stack Overflow用户
发布于 2021-01-19 07:53:32
你想要的东西不会发生的原因是你没有给row div一个全宽度。从您的代码中，将w-100添加到以下div：
<div class="row row-cols-1 row-cols-md-2 justify-content-between">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65782234
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号