bootstrap-4 - Bootstrap 导航栏右对齐
问题描述
我正在学习引导程序,我正在尝试制作一个导航栏,左侧带有徽标,右侧带有导航链接,但我不明白为什么ml-auto
在我的代码中不起作用。
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">SmoothieBar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
解决方案
推荐阅读
- apache-kafka - 如何将 kafkacat 有效负载打印输出转换为二进制
- c# - 阻止 C# 服务创建用户配置文件
- python-3.x - 使用 python3 检查网站是否存在
- javascript - 使用 WebPack 加载内部模块属性
- linux - 反汇编原始 MIPS 二进制文件,“无法反汇编架构未知”
- java - 休息服务中长时间运行的任务
- php - Add states for shipping zones instead of postcodes in Woocommerce
- styles - 如何隐藏 PrimeNG 颜色选择器覆盖?
- php - PHP + MySQL:显示具有相同值的所有记录
- android - 如何在 AOSP 构建中设置 ANDROID_VENDOR_KEYS?