[英]How to fix padding problem in Bootstrap 5?
自上而下的填充设置为 3%,但 15% 的左右填充不起作用。 有人可以解释这里有什么问题吗? 我想为流体容器设置 3% 的自上而下填充和 15% 的左右填充。 但似乎左右填充不起作用。 我使用 chrome 开发人员工具对其进行了调试。 但是左右填充被划掉了。
<div class="container-fluid">
<div class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class ="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class ="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class ="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
<!-- Title -->
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6 col-md-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
CSS文件
.container-fluid{
padding: 3% 15%;}
将“ <link rel="stylesheet" ”放在头部的底部,这样它就不会出现在引导链接的下方:) 从上到下的优先级!
Bootstrap 容器已经设置了水平填充。 您可以像这样限制宽度<div class="container-fluid" style="max-width: calc( 100% - (15% * 2) )">...</div>
根据我的经验,引导程序的边距和填充具有默认尺寸。 设置自定义尺寸可能不起作用。
container-fluid
是一个自定义引导类。 你不能覆盖它。 如果要自定义填充,则需要添加另一个类。
或根据文档自定义: https ://getbootstrap.com/docs/5.2/layout/containers/#how-they-work
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.