Bootstrap 5 导航栏中的错误
我正在开发一个简单的网络开发项目。我正在使用 Bootstrap 5，并且正在努力创建导航栏。导航栏的代码位于 header.html 中。
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<img src="/Users/morgan/Documents/12_london_app_brewery/london_app_brew/88-cafe-wifi/img/free_wifi.png" alt="Free Wifi" style="width:40px;" class="rounded-pill">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('add_cafe') }}">Add</a>
</li>
</ul>
</div>
</div>
</nav>
我的 index.html 和 add.html 文件中有 {% include "header.html" %} 。
导航栏如下所示
请注意，照片未显示，并且“主页”和“添加”未右对齐。
I'm working on a simple web-dev project. I'm using bootstrap 5 and I'm struggling to create the navbar. The code for the navbar is in header.html.
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<img src="/Users/morgan/Documents/12_london_app_brewery/london_app_brew/88-cafe-wifi/img/free_wifi.png" alt="Free Wifi" style="width:40px;" class="rounded-pill">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('add_cafe') }}">Add</a>
</li>
</ul>
</div>
</div>
</nav>
I have {% include "header.html" %} in my index.html and add.html files.
The navbar looks like the following
Note that the photo is not displaying and "Home" and "Add" are not aligned to the right.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
检查您的 Bootstrap 文件包。
如果您有 custom.scss （或任何其他名称），您在其中导入 Bootstrap 的源 Sass 文件，请检查是否错过了导航栏导入：
将 navbar-nav 移至右侧，使用“ms-auto”代替“mr-auto”（BS 5.1）；
我看到您的左侧有工件文本“-->”。可能你只是遇到了打开/关闭标签或注释的问题，因此你的 DOM 被破坏了。
Check your bundle of Bootstrap file.
If you have your custom.scss (or any other name), where you importing Bootstrap’s source Sass files, check if missed navbar imports:
To move navbar-nav to right side, use "ms-auto" instead of "mr-auto" (BS 5.1);
I see you have artifact text on the left "-->". May be you just have issues with open/closing tags or comments and because of that your DOM is broken.