html - 在 Bootstrap 行中显示 UL LI 元素 "inline"

Question

我很难在 Bootstrap 设置中使用 UL LI 元素。我正在尝试对齐它们，以便彼此相邻(水平)而不是垂直对齐。这是我的预兆:

<div class="container-fluid" style="margin-bottom:45px;">
        <div class="row text-center">
            <div class="col-lg-12">
                <h4 class="text-center">FOLLOW US</h4>
                <hr style="width:60%">
            </div>
        </div>
        <div class="row ">
            <div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
                <ul style="list-style:none;">
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-yelp"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

但我无法让它水平对齐。我尝试将 CSS 应用于 #socialMedia，例如 Float:left、display:inline，但它不起作用。

现在它们位于死点，这就是我希望它们保持的状态。

有人知道吗？

Answer 1

使用d-inline类...

<ul class="list-unstyled">
    <li class="d-inline"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-yelp"></i></a></li>
</ul>

https://www.codeply.com/go/DaDD3njGFz