如何右对齐图标？

Question

<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>

我想要将社交媒体图标与白框的右侧对齐。我试着使用flex box和align来调整内容，但是我猜我做错了什么。

Answer 1

我认为使用内置到Bootstrap中的导航栏组件会更好，因为默认情况下，您将在该元素&子元素上获得flexbox显示和对齐(参见：https://getbootstrap.com/docs/5.1/components/navbar/)。

如果你想继续你已有的代码，你可以使用flexbox对齐utils (参见：https://getbootstrap.com/docs/5.1/utilities/flex/)将搜索和图标块包装在d-flex包装器中，例如，如果你需要在移动设备上进行调整，这些是响应性的类。您还需要将搜索包装在div中，以便将flexbox属性作为一个组应用于搜索块。编写了一个代码来展示如何使用您的原始代码来完成此任务：https://codepen.io/themelizeme/pen/gOxGLPW

我不知道你的自定义css类会有什么影响，但我认为大部分都可以用Bootstrap utils来完成。

Answer 2

假设您说white-box时指的是search类，这就是您想要的：JSFiddle吗？(使用占位符图像)