【发布时间】：2020-07-02 21:58:47
【问题描述】：
我正在构建一个网站，我希望在左上方有一个可折叠的导航栏，在右上方有一个社交媒体栏。我希望社交图标始终与导航链接对齐。
我的方法如下：创建一个有 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>
这是它的外观截图。我希望将社交栏推到最右边。
这是我网站的link，以防您想在自己的浏览器中查看或查看完整的源代码
拜托了 :) 我是网络编程的新手。可能有一些更深层次的潜在问题是由于我以一种非常临时的、非惯用的方式进行的。
更新：我找到了问题所在。导航应该在行/列内，而不是相反。
【问题讨论】：
标签： html css bootstrap-4 navbar