<div class="container-fluid m-0 p-0 text-overlay">
<div class="row m-0 p-0">
<div class="col-12 m-0 p-0">
<img
src="images/Background.png"
class="img-fluid vw-100 vh-100"
alt=""
/>
</div>
<div class="center mx-auto box">
<i class="fas fa-search mt-4"></i>
<span class="mt-4 fs-3 search">Search</span>
<div class="social-media">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-snapchat"></i>
</div>
<div class="center">
<h1 class="text-center title">
DATA ANALYSIS <br />
& STATISTICS
</h1>
<p class="text-center mt-4 title-text">
Lorem ipsum dolor sit amet consectetur adipisicing <br />
elit. Reiciendis iste, aperiam possimus temporibus
<br />
pariatur nulla quas et atque voluptatibus!
</p>
<div class="text-center">
<button
type="button"
class="btn text-white mt-4 px-3 py-1"
style="background-color: rgb(38, 25, 100)"
>
Learn More
</button>
</div>
</div>
</div>
</div>
</div>
我想將社交媒體圖示與白框的右側對齊。我嘗試使用彈性框并使用 justify-content-end 對齊，但我想我做錯了什么。
uj5u.com熱心網友回復：
認為使用 Bootstrap 內置的導航欄組件會更好，因為默認情況下您將在該元素和子元素上獲得 flexbox 顯示和對齊（請參閱：https ://getbootstrap.com/docs/5.1/components/navbar/ ）。
如果您想繼續使用您擁有的代碼，您可以d-flex使用 flexbox 對齊工具將搜索和圖示塊包裝在一個包裝器中（請參閱：https ://getbootstrap.com/docs/5.1/utilities/flex/ ），這些是回應式的例如，如果您需要在移動設備上進行調整。您還需要將搜索包裝在一個 div 中，以便 flexbox 屬性作為一個組應用于搜索塊。制作了一個代碼筆來展示如何使用您的原始代碼完成它：https ://codepen.io/themelizeme/pen/gOxGLPW
我不知道您的自定義 css 類會受到什么影響，但我認為大多數都可以使用 Bootstrap utils 來完成。
uj5u.com熱心網友回復：
假設你說的search時候指的是班級white-box，這是你想要的：JSFiddle？（使用占位符影像）
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/345168.html
標籤：推特引导