html - WordPress Bootstrap5 Navbar 未与其他 col div 对齐
问题描述
我在 Wordpress 中实现了 Bootstrap 5 的导航栏。当屏幕尺寸较小时,按钮会出现并与 H2 navbar-brand 在水平轴上对齐。但是,当屏幕变大并且菜单展开时,这些项目会比 navbar-brand 显得“低”。
我不知道如何在不破坏其他内容的情况下使扩展菜单与 navbar-brand 保持一致。将不胜感激任何帮助。
Header.php HTML
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<div class="row d-flex align-item-center justify-content-between">
<div class="col ">
<div class="dropdown-container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="site-menu dropdown-primary">
<ul id="primary-menu" class="navbar-nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-16"><a href="https://example.com/" aria-current="page">Test</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="https://example.com/checkout/">Checkout</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="https://example.com/sample-page/">Sample</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://example.com/shop/">Shop</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://example.com/aboot-us/">Aboot Us</a></li>
</ul>
</div>
<!-- other nav ul lists -->
</div>
</div>
</div>
<div class="col">
<a class="navbar-brand" href="https://www.example.com"><h2>Online Shop</h2></a>
</div>
</div>
</div>
</nav>
CSS
header .navbar-brand h2 {
color: white;
padding: 1rem 0;
}
#primary-menu li a {
display: block;
padding: 0.25rem 1rem;
color: rgb(176, 252, 153);
font-size: 1rem;
font-weight: bold;
white-space: nowrap;
}
.dropdown-container {
position: relative;
}
.dropdown-primary {
position: absolute;
top: 100%; /* Bottom of button */
left: 0;
margin-right: -100px;
}
解决方案
您的导航栏与 Bootstrap-5 标准完全不同。您的导航栏中有一行和一些列,这并不是真正需要的。导航栏折叠功能可以更改较小屏幕的布局。你有一堂课,dropdown-container,
就是把你的导航链接放在你的导航栏下面,所以我把它删了。另外,你有一个我不确定的下拉容器 div,所以我删除了它。
Bootstrap的navbar很强大,但是很容易坏掉,所以一次最好不要改太多。
使用您拥有的代码,当前页面没有任何指示。
更新为右侧有小屏幕菜单项(在汉堡按钮下方)
如果您希望菜单项位于小屏幕的屏幕右侧,您可以添加text-end
到每个项目。这将导致项目在折叠菜单的右侧排列,但不会影响更大显示的链接。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<style>
header .navbar-brand h2 {
color: white;
padding: 1rem 0;
}
#primary-menu li a {
display: block;
padding: 0.25rem 1rem;
color: rgb(176, 252, 153);
font-size: 1rem;
font-weight: bold;
white-space: nowrap;
}
.navbar-brand {
font-size: 2rem;
}
</style>
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Online Shop</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul id="primary-menu" class="navbar-nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-16 text-end"><a href="https://example.com/" aria-current="page">Test</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18 text-end"><a href="https://example.com/checkout/">Checkout</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20 text-end"><a href="https://example.com/sample-page/">Sample</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21 text-end"><a href="https://example.com/shop/">Shop</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26 text-end"><a href="https://example.com/aboot-us/">About Us</a></li>
</ul>
<!-- other nav ul lists -->
</div>
</div>
</nav>
推荐阅读
- python - 比较两个数据帧并获得一个值
- php - 当我从 EventServiceProvider 的引导方法中删除参数时,我在 laravel 5.3 中遇到错误
- c# - 将 SerialDataReceivedEventHandler 添加到列表中以返回主方法
- jenkins - 如何阻止在特定日期和时间每分钟运行一次的 Jenkins 作业
- reactjs - Word Counter React - 显示词频
- spring - 在所有 @Retryables 上执行的 RetryListenerSupport 处理程序
- php - 使用 php 在 mysql 数据库中添加用户名、电子邮件和密码时出错
- automation - 我可以使用什么编程语言和库来自动化这个 Blender 到 Unreal Engine 的管道?
- angular - 模拟服务中的方法被调用,但 toHaveBeenCalled() 在 Angular Jasmine 中失败
- sql-server - 使用“插入选择 IDENT_CURRENT()”和“从表中插入选择 IDENT_CURRENT()”时 IDENT_CURRENT() 的值