我有 3 個 div，我想將“div2”與頁面中心對齊，并將“div3”對齊在同一行的末尾。
我一直在嘗試一些事情，比如我目前正在使用的“d-flex justify-content-center”或將“div1”排成一行并給“div3”類“ml-auto”，但后來我沒有知道如何將“div1”對齊到中心。
我正在使用 Bootstrap 5。
我的實際結果
<div class="text-center mt-2" id="div1">
<div class="d-flex justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
uj5u.com熱心網友回復：
一種方法是使用嵌套的 flexbox專案。為此，您需要在左側有一個空的間隔器，并且每個子項都需要flex: 1：
.flex1 {
flex: 1;
}
<div class="text-center mt-2 d-flex w-100" id="div1">
<div class="d-flex flex1"><!--spacer --></div>
<div class="d-flex flex1 justify-content-center" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="d-flex flex1 justify-content-end" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
使用 flexbox 嵌套的死點
另一種方法是使用絕對位置：
<div class="text-center mt-2 d-flex justify-content-center" id="div1">
<div class="d-flex" id="div2">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div class="ms-auto position-absolute end-0" id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>
使用絕對位置的死點
閱讀更多：此處解釋了對齊 flexbox 專案
uj5u.com熱心網友回復：
此解決方案應該可以幫助您：
- div2 位于行的中心
- div3 在行的末尾
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-end" id="div1">
<div id="div2" class="position-absolute" style="left:50%;width:100px;margin-left:-50px">
<a class="btn btn-lg btn-success" href="#"> Link 1 </a>
</div>
<div id="div3">
<a class="btn btn-lg btn-info" href="#"> Link 2 </a>
<a class="btn btn-lg btn-info" href="#"> Link 3 </a>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/347718.html
標籤：html 推特引导 结盟 bootstrap-5
下一篇：HTML/CSS-創建粘性覆寫