調整行高后，x右側的結束標記更靠近警報訊息框的底部。我正在使用 Bootstrap v5.0.1。如何垂直居中x標記？謝謝。
CSS：
.alert {
margin-bottom: 1px;
height: 45px;
line-height: 45px;
padding: 0px 15px;
font-size: 15px;
}
HTML：
<div class="alert alert-success alert-dismissible fade show" role="alert">
Success! Your application was submitted!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
結果：
uj5u.com熱心網友回復：
用于您mt-2的.margin-top: .5em;button
.alert {
line-height: 45px;
font-size: 15px;
}<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="alert alert-success alert-dismissible fade show" role="alert">
Success! Your application was submitted!
<button type="button" class="btn-close mt-2" data-bs-dismiss="alert" aria-label="Close"></button>
</div>旁注 - 在 Bootstrap 中設定height、line-height和padding有點多余。您應該使用Bootstrap Text Utilities來替換您的 CSS。例如，lh = line-height和fs = font-size。
uj5u.com熱心網友回復：
您可以更改 de .btn-close 高度。我嘗試了一些高度，我發現這是可以接受的。
.alert {
margin-bottom: 1px;
height: 45px;
line-height: 45px;
padding: 0px 15px;
font-size: 15px;
}
.btn-close {
height: 5px;
}
uj5u.com熱心網友回復：
如果您不想覆寫現有的引導類，可以添加自己的，并像這樣覆寫填充：
<style>
.alert {
margin-bottom: 1px;
height: 45px;
line-height:45px;
padding:0px 15px;
font-size: 15px;
}
.alert >.extra {
padding: 0.8rem 1rem;
}
</style>
<div class="alert alert-success alert-dismissible fade show" role="alert">
The activator phrase was successfully registered!
<button type="button" class="extra btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431650.html
下一篇：在小型設備中將一行影像轉換為輪播