html - 在导航栏中右对齐社交图标

问题描述

我正在构建一个网站，我希望在左上角有一个可折叠的导航栏，在右上方有一个社交媒体栏。我希望它使社交图标始终与导航链接对齐。

我的方法如下：创建一个有 2 列的行。第一列有导航栏，第二列有所有社交媒体图标。我使用“justify-content-between”将这两列推到相反的两端。

我有点在那里。我有可折叠的导航栏和社交链接。

问题是社交栏不在右上角；它与导航栏相邻。我认为这是因为我的行没有占据页面的整个宽度。

以下是相关代码：

 <nav class="navbar navbar-expand-sm navbar-light bg-white">
    <div class="row justify-content-between align-items-baseline">
        <div class="col-auto">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-fill">
                    <li class="nav-item"><a class="nav-link active" href=".">Home<span class="sr-only">(current)</span></a></li>
                    <li class="nav-item"><a class="nav-link" href="teaching">Teaching</a></li>
                    <li class="nav-item"><a class="nav-link" href="research">Ressearch</a></li>
                    <li class="nav-item"><a class="nav-link" href="outreach">Outreach</a></li>
                    <li class="nav-item"><a class="nav-link" href="personal">Personal</a></li>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-auto">
            <a href="mailto: arjunc@pitt.edu" target="_blank"><img src="https://img.icons8.com/material-sharp/24/000000/important-mail.png"/></a>
            <a href="https://www.twitter.com/arjunc12" target="_blank"> <img src="https://img.icons8.com/fluent/24/000000/twitter.png"/></a>
            <a href="https://www.instagram.com/arjunc12" target="_blank"><img src="https://img.icons8.com/fluent/24/000000/instagram-new.png"/></a>
            <a href="http://writers-fakeblock.blogspot.com/" target="_blank"><img src="https://img.icons8.com/color/24/000000/blogger.png"/></a>
        </div>
    </div>
</nav>

这是它的外观截图。我希望将社交栏推到最右边。

这是我网站的链接，如果您想在自己的浏览器中查看或查看完整的源代码

请善待 :) 我是网络编程的新手。可能有一些更深层次的潜在问题是由于我以一种非常临时的、非惯用的方式进行的。

更新：我发现了这个问题。导航应该在行/列内，而不是相反。

标签： htmlcssbootstrap-4navbar

html - 在导航栏中右对齐社交图标

问题描述

解决方案

推荐阅读