问题描述
我在 Flask(Python) 上的一个博客网站上工作,使用 Bootstrap 4。我使用的是 Bootstrap 4 CDN,然后当 Bootstrap 5 出现时,我切换到 Bootstrap 5(本地)。
我面临两个问题。
如果我只是切换到 Bootstrap 4,这两个问题都不存在。
如何在 Bootstrap 5 中校正对齐方式?
如何使菜单按钮在响应式布局上工作?
What I want. ( note: this was on Bootstrap 4 )
How it is. ( note: this is on Bootstrap 5 )
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Flask Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('logout') }}">logout</a>
<a class="nav-item nav-link" href="{{ url_for('account') }}">Account</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
解决方法
将您的班级 mr-auto
更改为 me-auto
从 bootstrap spacing in bootstrap 5.0
<div class="navbar-nav me-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
</div>
另外,对于你的按钮不工作,你应该做一点改变:
将其更改为在 bs
和 data-toggle
data-target
所以它会是这样的:data-bs-toggle
和 data-bs-target
来自:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
到:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
不要忘记查看有关 navbar 的引导程序文档,这里是您的代码的工作副本:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<header class="site-header">
<nav class="navbar bg-dark navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Flask Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
<a class="nav-item nav-link" href="{{ url_for('account') }}">Account</a> {% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a> {% endif %}
</div>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.min.js"></script>
</body>
</html>
如果这没有帮助,请告诉我。