我正在嘗試使用引導程式實作登錄頁面，如下所示：
但是出于某種原因，我想用來放置徽標的 div 不能是全寬的。
顯然 w-100 不能正常作業。
我怎樣才能使這個 div 全寬？：
<div style="background-color:#193D4C;" class="w-100">
<h3 class="text-light">Sign In</h3>
</div>
uj5u.com熱心網友回復：
所以在 JSFidle 中是這一行，即 Body 標簽之后的第 4 行。
<div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
p-5 正在向主框添加填充 x5。您可以完全洗掉 p-5 以完全沒有填充。然后你的標題應該延伸到邊緣。
但是，您可能希望在其他內部元素（例如表單）上放置邊距或填充。這是因為移除 p-5 也可能會將這些元素推到盒子的邊緣。
這是來自 JSFiddle 的完整 BODY。我已經洗掉了 p-5 填充，并在登錄標題和表單中添加了 p-3 填充。希望這有效:)
<body>
<div class="container-fluid vh-100" style="margin-top:300px">
<div class="" style="margin-top:200px">
<div class="rounded d-flex justify-content-center">
<div class="col-md-4 col-sm-12 shadow-lg bg-light">
<div style="background-color:#193D4C;" class="w-100 p-3">
<h3 class="text-light">Sign In</h3>
</div>
<form action="" class="p-3">
<div class="p-4">
<div class="input-group mb-3">
<span class="input-group-text bg-primary"><i
class="bi bi-person-plus-fill text-white"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<span class="input-group-text bg-primary"><i
class="bi bi-key-fill text-white"></i></span>
<input type="password" class="form-control" placeholder="password">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Remember Me
</label>
</div>
<button class="btn btn-primary text-center mt-2" type="submit">
Login
</button>
<p class="text-center mt-5">Don't have an account?
<span class="text-primary">Sign Up</span>
</p>
<p class="text-center text-primary">Forgot your password?</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
````
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328298.html
標籤：html css 推特引导 bootstrap-5