我正在以程序员的身份开始我的第一个项目，但我发现自己遇到的麻烦无法解决。
我制作了一个可扩展的导航栏。但是，当它扩展时，其他元素也会下降。我不知道原因，尝试解决问题两天后，我没有成功。
以下是说明情况的image：
然后，这是我的代码：
<header id="aermenu" class="sticky-top">
<div class="container">
<div class="row">
<div id="saudacoes" class="col-1 order-lg-1 order-2 align-self-center">
<p class="pt-3">Saudações, <br/> <span>Usuário</span></p>
</div>
<div class="col-lg-8 col-2 offset-lg-1 order-lg-2 order-1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler mt-3" data-toggle="collapse" data-target="#menubar">
<span class="fas fa-bars text-white"></span>
</button>
<div class="collapse navbar-collapse" id="menubar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="aeraer.html" class="nav-link" onmouseover="aerhvr(this,'on')" onmouseleave="aerhvr(this,'off')">
<img src="imagens/bt-aer.png" class="img-fluid btu" id="btaer"/>
<img src="imagens/bt-aer-on.png" class="img-fluid btu" id="btaeron"/>
</a>
</li>
<li class="nav-item">
<a href="aerlogin.html" class="nav-link" onmouseover="loginhvr(this,'on')" onmouseleave="loginhvr(this,'off')">
<img src="imagens/bt-login.png" class="img-fluid btu" id="btlogin"/>
<img src="imagens/bt-login-on.png" class="img-fluid btu" id="btloginon"/>
</a>
</li>
<li class="nav-item">
<a href="aerplay.html" class="nav-link" onmouseover="playhvr(this,'on')" onmouseleave="playhvr(this,'off')">
<img src="imagens/bt-play.png" class="img-fluid btu" id="btplay"/>
<img src="imagens/bt-play-on.png" class="img-fluid btu" id="btplayon"/>
</a>
</li>
<li class="nav-item">
<a href="aerequipe.html" class="nav-link" onmouseover="equipehvr(this,'on')" onmouseleave="equipehvr(this,'off')">
<img src="imagens/bt-equipe.png" class="img-fluid btd" id="btequipe"/>
<img src="imagens/bt-equipe-on.png" class="img-fluid btd" id="btequipeon"/>
</a>
</li>
<li class="nav-item">
<a href="aerrank.html" class="nav-link" onmouseover="rankhvr(this,'on')" onmouseleave="rankhvr(this,'off')">
<img src="imagens/bt-rank.png" class="img-fluid btd" id="btrank"/>
<img src="imagens/bt-rank-on.png" class="img-fluid btd" id="btrankon"/>
</a>
</li>
<li class="nav-item">
<a href="aercontato.html" class="nav-link" onmouseover="contatohvr(this,'on')" onmouseleave="contatohvr(this,'off')">
<img src="imagens/bt-contato.png" class="img-fluid btd" id="btcontato"/>
<img src="imagens/bt-contato-on.png" class="img-fluid btd"id="btcontatoon"/>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-2 order-3 align-self-center ml-auto d-none d-sm-block">
<div class="justify-items-end" >
<img src="imagens/joker-sign.png" class="img-fluid jsign"/>
</div>
</div>
</div>
</div>
</header>
如果有人可以帮助我了解我在哪里犯了错误，我将不胜感激。
（此外，如果您需要我将代码的其他部分（如CSS或JS）带到这里，请告诉我。我真的认为问题出在HTML部分，但我不知道在哪里。 / p>
答案 0 :(得分：1)
我为您做到了，内容不是您想要的，但是我给您了这个想法，
如果您需要在右侧添加徽标，只需在navbar-toggler类之后添加图像，以使其向右拉，而对于您的p tag name called Saudações, <br/> <span>Usuário，则将其图像添加到mr-auto类中，以便将其向左拉并提供额外的边距你想要的。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<p class="mr-auto ml-5">Saudações, <br/> <span>Usuário</span></p>
<img class="navbar-brand" style="width: 50px;" src="pdfs/img/lol1.jpg">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>