Почему мои ссылки не выровнены по правому краю и не отображают пробелы между значками социальных сетей?

Question

Я хочу переместить ссылки вправо и хочу, чтобы значки социальных сетей, которые уже находятся справа, имели некоторое разумное расстояние между ними с помощью начальной загрузки, но я не уверен, как этого добиться.

Моя попытка ниже не работает, и я не знаю почему (изображение ниже - то, что я сейчас вижу).

Что я делаю не так и как я могу это исправить?

import React from 'react';

const header = () => {
    return(
        <header>
            <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse text-xs-right" id="navbarCollapse">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <a className="nav-link" href="#">Winners <span className="sr-only">(current)</span></a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Sweepstakes</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link disabled" href="#">FAQ</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link disabled" href="#">Blog</a>
                        </li>
                    </ul>
                </div>

                <div className="text-xs-right">
                    <a href="#" className="fa fa-facebook"></a>
                    <a href="#" className="fa fa-instagram"></a>
                    <a href="#" className="fa fa-youtube"></a>
                    <a href="#" className="fa fa-twitter"></a>
                </div>
            </nav>
        </header>
    );
};

export default header;

Answer 1

Просто добавьте .mx-1 к вашим иконкам, чтобы каждый из них оставил поля слева и справа:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="text-xs-right">
    <a href="#" class="mx-1 fa fa-facebook-f"></a>
    <a href="#" class="mx-1 fa fa-instagram"></a>
    <a href="#" class="mx-1 fa fa-youtube"></a>
    <a href="#" class="mx-1 fa fa-twitter"></a>
</div>

Answer 2

Вы можете использовать предопределенный класс btn для достижения желаемого расстояния. Кроме того, рассмотрите возможность добавления btn-small для получения величины интервала / отступа, которая больше подходит для этих кнопок социальных сетей, и btn-link для сохранения внешнего вида кнопок социальных сетей:

<div className="text-xs-right">
  <a href="#" className="btn btn-small btn-link fa fa-facebook"></a>
  <a href="#" className="btn btn-small btn-link fa fa-instagram"></a>
  <a href="#" className="btn btn-small btn-link fa fa-youtube"></a>
  <a href="#" className="btn btn-small btn-link fa fa-twitter"></a>
</div>

Для получения дополнительной информации о классе кнопок btn и классах модификаторов кнопок, таких как btn-small и btn-link, , см. Документацию для кнопок