时间戳

首页 > 解决方案 > 为什么我的链接不能右对齐，也不能在社交图标之间显示空间？

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

问题描述

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

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

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

在此处输入图像描述

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;

标签： javascriptcssreactjsbootstrap-4

解决方案

您可以使用预定义的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-smalland ）的更多信息btn-link，请参阅按钮文档

推荐阅读