为什么我的链接不能右对齐，也不能在社交图标之间显示空间？答案

【问题标题】：Why won't my links align to the right as well as display spaces in between social icons?为什么我的链接不能右对齐，也不能在社交图标之间显示空间？
【发布时间】：2019-01-10 10:05:26
【问题描述】：

我想将链接移动到右侧，并且我希望已经在右侧的社交图标使用引导程序在它们之间有一些合理的空间，但我不确定如何实现这一点。

我在下面的尝试不起作用，我不知道为什么（下图是我目前看到的）。

我做错了什么，我该如何解决？

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;

【问题讨论】：

标签： javascript css reactjs bootstrap-4

【解决方案1】：

您可以使用预定义的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、see the documentation for buttons）的更多信息

【讨论】：

啊，好的，我知道了。但是有了这个建议，我正在失去与社交图标相关的颜色。它们不再像我提供的屏幕截图中显示的那样是蓝色的。
@greyskies 啊好的 - 刚刚更新了答案。这有帮助吗？

【解决方案2】：

只需将.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>

【讨论】：