我有一個帶有標題的側邊欄。我想在標題中嵌入一個徽標 切換按鈕。
由于某種原因，我無法正確對齊按鈕。
我根據 bootstrap 5 檔案和一些 SO 答案嘗試過的內容：
text-right
text-end
float-right
他們都沒有作業。
如果螢屏調整大小（如何使其靜態/粘性），如何將切換按鈕向右對齊并防止其改變位置？
所需結果（中間垂直對齊，右側水平對齊）：
uj5u.com熱心網友回復：
您應該添加 justify-content-end和邊距mx-3將您的代碼片段更改為此一個，一切都會好起來的
<div class="col d-flex align-items-center justify-content-end mx-3">
<button type="button" id="sidebarCollapse" class="btn btn-light float-right">
<i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
</button>
</div>
uj5u.com熱心網友回復：
您可以洗掉.row和.col類并使用.justify-content-between：
<div class="d-flex justify-content-between align-items-center">
<div">
<svg id="logoSvg" width="218" height="84" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="49.75" x="39.32813" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
</g>
</svg>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-light float-right">
<i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
</button>
</div>
</div>
在 JSFiddle 上查看
您只需要在折疊后更改/洗掉徽標。
uj5u.com熱心網友回復：
這里有2個問題：
- SVG 的視圖框尺寸太大，導致溢位
- 在徽標包裝器 div 上使用 6 列將無法獲得所需的效果
我建議從徽標和箭頭包裝 div 中洗掉行和列類。這是您的代碼的更新版本，其中我添加了自定義 CSS、新類并更新了 SVG 的視圖框 x/y 位置：https : //jsfiddle.net/bomsqn0r/8/
更新的 SVG：
<svg id="logoSvg" width="140" height="28" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="24" x="0" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
</g>
</svg>
更新的 HTML：
<div class="logo-arrow-container">
<div class="logo-container">
<svg id="logoSvg" width="140" height="28" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="24" x="0" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
</g>
</svg>
</div>
<div class="arrow-container">
<button type="button" id="sidebarCollapse" class="btn btn-light float-right">
<i class="bi bi-caret-left-fill" style="color: #193D4C;"></i>
</button>
</div>
</div>
添加了 CSS：
.logo-arrow-container {
display: flex;
align-items: center;
}
.logo-container {
margin: 0 auto;
}
.arrow-container {
margin-right: 15px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/338343.html
標籤：html css 推特引导 bootstrap-5
上一篇：如何在androidstudio中將Html頁面轉換為Pdf
下一篇：單擊css影片播放狀態