我正在使用引导程序构建一个导航栏,左边是我的名字,右边是链接。布局很好,直到我添加了切换按钮。它现在在左边显示我的名字,在右边显示链接,而不是在右边(当页面展开时)。当页面最小化时,它看起来不错。我怎样才能解决这个问题?
<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
<h1 class="text-white"> Aiya Siddig</h1>
<button class = "navbar-toggler" data-toggle = "collapse" data-target = "#collapse_target">
<span class = "navbar-toggler-icon" ></span>
</button>
<div class = "collapse navbar-collapse" id = "collapse_target">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"> About Me </a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html"> Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact </a>
</li>
</ul>
</div>
</nav>
您可以使用引导类证明内容与flex-end
你collapse
navbar
,以确保您的联系总是在right
对大screen
和responsive
也。
现场工作演示:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
<h1 class="text-white"> Aiya Siddig</h1>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapse_target">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"> About Me </a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html"> Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact </a>
</li>
</ul>
</div>
</nav>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句