引导程序下拉中心未按预期运行

我使用的是最新的Bootstrap 5，下拉中心在下拉列表中的行为与预期不同。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/53b1bfb7db.js"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Movie Reviews | Home Page</title>
</head>
<body>
<head>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a href="#" class="navbar-brand">MovieDB</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbar"
>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-center">
<a href="#" class="nav-link" data-bs-toggle="dropdown"
><i class="fa-solid fa-circle-user fa-2xl"></i
></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Link 1</a>
<a href="#" class="dropdown-item">Link 2</a>
<a href="#" class="dropdown-item">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</head>
<main></main>
<footer></footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>

目前，下拉列表和下拉中心之间的视觉差异似乎为零。我对任何解决方案持开放态度；我知道用于居中下拉的旧方法，但我想在Bootstrap 5 中尽可能使用新方法

首先，如果使用Bootstrap 5，请将data-toggle="collapse" data-target="#navbar"更改为data-bs-toggle="collapse" data-bs-target="#navbar"。

第二，dropdown-center工作，但不在navbar内部。尝试将完全相同的代码放在navbar之外，您就会看到它是有效的。

请参阅下面的片段。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/53b1bfb7db.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Movie Reviews | Home Page</title>
</head>
<body>
<head>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a href="#" class="navbar-brand">MovieDB</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-center">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><i class="fa-solid fa-circle-user fa-2xl"></i></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Link 1</a>
<a href="#" class="dropdown-item">Link 2</a>
<a href="#" class="dropdown-item">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</head>
<div class="nav-item dropdown-center mt-3">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><i class="fa-solid fa-circle-user fa-2xl"></i></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Link 1</a>
<a href="#" class="dropdown-item">Link 2</a>
<a href="#" class="dropdown-item">Link 3</a>
</div>
</div>
<main></main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

编辑

添加以下CSS：

.dropdown-menu {
display: inline-block;
width: 150px;
transform: translateX(50vw);
margin-left: calc(-75px - 12px) !important;
}

您需要将width和transform设置为.dropdown-menu的视口宽度的一半(即50vw(。尝试删除margin-left，您将看到transform: translateX(50vw);的作用。然后通过设置margin-left: calc(-75px - 12px) !important;使.dropdown-menu居中。我是怎么得到这些数字的？如果将width设置为150px，则其中一半为75px。另外，您需要考虑.container的12px填充。

请参阅下面的片段。

.dropdown-menu {
display: inline-block;
width: 150px;
transform: translateX(50vw);
margin-left: calc(-75px - 12px) !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/53b1bfb7db.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Movie Reviews | Home Page</title>
</head>
<body>
<head>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a href="#" class="navbar-brand">MovieDB</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-center">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><i class="fa-solid fa-circle-user fa-2xl"></i></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Link 1</a>
<a href="#" class="dropdown-item">Link 2</a>
<a href="#" class="dropdown-item">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</head>
<main></main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

如果有人想知道如何暂时解决这个问题，你必须对保持下拉d-flex flex列对齐项中心的导航项使用以下类，然后你必须应用左的内联样式：unset！对下拉菜单元素很重要。

以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/53b1bfb7db.js" crossorigin="anonymous"></script>
<title>Movie Reviews | Home Page</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarNav"
>
<ul class="navbar-nav" id="navbarNav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
<ul class="navbar-nav" id="navbarNav">
<li
class="nav-item dropdown d-flex flex-column align-items-center"
>
<a
href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
><i class="fa-solid fa-circle-user fa-2xl"></i> Username</a
>
<div class="dropdown-menu" style="left: unset !important">
<a href="#" class="dropdown-item">Link 1</a>
<a href="#" class="dropdown-item">Link 2</a>
<a href="#" class="dropdown-item">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main></main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"crossorigin="anonymous"
></script>
</body>
</html>

如果默认情况下发生这种情况是有原因的，请对此进行解释。

相关内容

最新更新

热门标签：