отображать элементы UL LI "inline" в строке начальной загрузки

Question

Мне трудно работать с элементами 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

Answer 2

Вы сказали, что применили поплавок к #socialMedia, но это ul.Вы должны применить float: left на li с.Добавьте float: left к #socialMedia li.

(Если это все еще не работает, вы должны убедиться, что у вас достаточно специфичности, чтобы переопределить Bootstrap. В крайнем случае, добавьте !important).