如何解决Bootstrap 5 容器在排成一行时表现不同
在 Bootstrap 4.6 中,容器的最大宽度为 1320 像素。无论是在行内还是在行外,此宽度都相同。但是在 Bootstrap 5 中这不一样,我找不到原因。
图片:
BT4 图像:
– 同一网站,但使用 BT5:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="container">
</div>
</div>
<div class="row">
<div class="container">
</div>
</div>
<div class="row">
<div class="container">
</div>
</div>
</div>
</body>
解决方法
您不应该在 container
中使用 row
,它应该是 col
,对于自 v3 以来的每个 Bootstrap 版本
行是列的包装器。每列都有水平填充 (称为排水沟)用于控制它们之间的空间。这个填充 然后在具有负边距的行上抵消以确保 列中的内容在视觉上与左侧对齐。行 还支持修饰符类以统一应用列大小和 用于更改内容间距的装订线类。
检查 Bootstrap 5 中的容器示例 docs
取自 {{3}}
的基本示例<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。