在引導程式 5 中，當我這樣做時：
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="background-color: lime;">
<div class="container-fluid" style="background-color: red;">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>第二個容器不是 100% 寬度。
我可以在官方檔案中閱讀以下內容：
.container-fluid，即 width: 100% at all breakpoints
那么……為什么會發生這種情況？
uj5u.com熱心網友回復：
檢查您的代碼后，似乎.container-fluid有左右填充：
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}
這是代碼，請嘗試在您的 css 中執行以下操作，希望您的 div 會像您需要的那樣占用 100% 的寬度，將其替換為：
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
如果添加padding-right: 0;andpadding-left: 0;不能解決您的問題，請嘗試：
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: 0px !important;
padding-left: 0px !important;
margin-right: auto;
margin-left: auto;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507488.html
上一篇：導航欄按鈕在小型設備上不起作用
下一篇：如何擺脫導航欄周圍的空間？