在Bootstrap 4中,要将移动视图导航栏的菜单内容显示到中心位置,可以使用以下步骤:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbarNav">
内部,将菜单内容的<ul>
元素的class
属性设置为navbar-nav ml-auto
。这样可以使菜单内容靠右对齐。<ul>
元素上添加ml-auto
类,这样可以使菜单内容靠右对齐。<ul>
元素添加以下样式:@media (max-width: 767px) {
.navbar-nav.ml-auto {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
}
这样,菜单内容就会在移动视图下居中显示。
请注意,以上答案是基于Bootstrap 4的,如果使用其他版本的Bootstrap可能会有差异。此外,腾讯云并没有与Bootstrap直接相关的产品或服务,因此无法提供相关的推荐链接。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云