twitter-bootstrap - 在 Bootstrap 4 中重新定位导航栏的元素
问题描述
我是 Bootstrap 的新手。
在 Bootstrap 4 中,我想使用固定顶部的品牌导航栏。导航栏应显示品牌、6 个导航项和一个下拉菜单:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</nav>
在大视口上,页面将显示在 1,200 像素宽度的容器中。
我想修改导航栏元素的水平位置,使 6 个导航项在 1,200px 容器中水平居中,品牌元素在容器的左端结束,下拉元素在容器的右端开始:
在较小的视口上,导航栏应该遵循其标准行为,即它应该折叠并显示汉堡包(它集成了 6 个菜单项以及下拉菜单),并且品牌元素应该从视口的左侧水平开始。
我该如何实施?
编辑:
这段代码
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
- 一个
<div class="container">
之后<nav...>
。这给出了 1200 px 的容器。 - 两个
<ul class="navbar-nav">
而不是一个。这将 6 个导航项与下拉列表分开。 - 第一个
<ul class="navbar-nav">
用途m-auto
。这将 6 个导航项居中并将下拉列表向右推。
然而结果并不如应有的那样。品牌元素应该在居中 1200px 的左端结束,下拉元素应该从居中 1200px 的右端开始:
解决方案
试试这个代码:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand mr-0" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
<div class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</div>
</div>
</nav>
推荐阅读
- django - 以原子方式更新和获取 Django 模型对象
- simd - GraalVM 是否完全支持 SIMD / AutoVectorization 或与 jdk9+ 一样?
- java - grafana 中的“t.data.data 未定义”
- spring - 使用 Spring Boot 对 mongoDB 进行身份验证失败
- mysql - Cpanel 上的 Express/NodeJS 应用程序
- postgresql - PostgreSQL:如何在脚本中获取和设置枚举列表变量?
- ansible - 稳定 | 同步 |
- php - 如何确保对我的服务器的请求的来源是合法的?
- javascript - 如何在 GitHub Pages 中使用基本的 Google Sheets javascript 脚本?
- android-studio - Android 启动,然后进入黑屏。亚行外壳工程