我如何正确对齐我的导航栏项目（ul）
Posted
技术标签:
【中文标题】我如何正确对齐我的导航栏项目（ul）【英文标题】：How i can align correctly my navbar items (ul) 【发布时间】：2021-05-08 15:07:57 【问题描述】：我在引导导航栏中的对齐方面需要一些帮助，如果可能的话，我想只使用引导类来纠正这个问题。
我当前的导航栏设计，当汉堡出现我的对齐是好的时，在响应式（lg-expand）中正常工作，图标和汉堡在右边，其余的内容向下，
但是当我的导航栏全宽时，我需要图标和用户位于列表项上方（右侧对齐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" />
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">
<a class="navbar-brand" href="#"><img src="https://soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a>
<div class="float-right">
<i class="mdi mdi-account-circle info pr-2 text-primary font-size-19"></i><a href="#" class="text-primary"><span class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a><a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></div>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
</body>
</html>【问题讨论】：
我的设计是全宽的，我想变成这样：ibb.co/Gntcpk5 【参考方案1】：就是这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous"
/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">
<div class="col-8">
<a class="navbar-brand " href="#"><img src="https://soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a>
</div>
<div class="col-4">
<div class="row" style="margin-left: 25%;">
<i class="mdi mdi-account-circle info pr-2 text-primary font-size-19 "></i><a href="#" class="text-primary"><span
class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a>
<a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
可以查看：https://jsfiddle.net/y19drx5j/1/
【讨论】：
【参考方案2】：我刚刚用引导类实现了它。
测试时，可以点击右上角的“全屏”链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous"
/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex flex-wrap">
<a class="navbar-brand order-lg-2" href="#"><img src="https://soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a>
<div class="d-flex align-items-center ml-lg-auto">
<i class="mdi mdi-account-circle info pr-2 text-primary font-size-19"></i><a href="#" class="text-primary"><span class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a><a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></div>
<div class="w-100 d-none d-lg-block"></div>
<div class="collapse navbar-collapse justify-content-end order-lg-3" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
</body>
</html>发生了什么变化
<div class="float-right">元素类改为"d-flex align-items-center ml-lg-auto"
已添加元素 <div class="w-100 d-none d-lg-block"></div>。
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">元素类列表添加到flex-wrap。
<a class="navbar-brand" href="#"> 类已添加order-lg-2。
<div class="collapse navbar-collapse justify-content-end" ... 元素类列表添加order-lg-3。
【讨论】：
以上是关于我如何正确对齐我的导航栏项目（ul）的主要内容，如果未能解决你的问题，请参考以下文章