html - 为什么这个 Bootstrap 4 Navbar 不能创建等宽的菜单项?
问题描述
我有一个带有六个导航项和一个内联搜索的 Bootstrap 4 导航栏。
菜单项被压扁在菜单的左边(水平方向),有很大的空隙,最右边是搜索框。
这是我正在努力使用的源代码(HTML/CSS)的codeply 。(或完整代码见下文)
不幸的是,虽然有关于使用 navs 完成此操作的文档,但没有用于 navbars 的文档。
关于如何解决这个问题的任何想法?
<div class="page">
<div class="lqd-header-menu">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-primary-menu" class="navbar-nav mr-auto nav-justified">
<li id="menu-item-32" class="nav-item"><a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a></li>
<li id="menu-item-5150" class="nav-item"><a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a></li>
<li id="menu-item-4858" class="nav-item"><a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a></li>
<li id="menu-item-29" class="nav-item"><a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a></li>
<li id="menu-item-28" class="nav-item"><a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a></li>
<li id="menu-item-442598" class="nav-item"><a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a></li>
</ul>
<form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
<input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
.page {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
margin: auto;
max-width: 1280px;
}
.lqd-header-menu {
margin: 0;
background-color: #14a7e0;
}
.lqd-header-menu ul li {
border-left: 1px solid #fff;
box-sizing: border-box;
color: #fff;
}
/* Individual Menu Items */
.lqd-header-menu li a {
color: #fff;
/* Set Menu Item Links to White */
display: block;
font-size: 1rem;
font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
text-transform: uppercase;
}
/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
border: medium none;
}
.lqd-header-menu ul li:last-child {
border-right: 1px solid #fff;
}
解决方案
我使用 css flexbox ( codeply )
<div class="page">
<div class="lqd-header-menu">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a>
<a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a>
<a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a>
<a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a>
<a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a>
<a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a>
<form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
<input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
.collapse.navbar-collapse {
display: flex;
justify-content: space-between;
align-items: center;
}
.collapse.navbar-collapse a{
color: white;
}
.page {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
margin: auto;
max-width: 1280px;
}
.lqd-header-menu {
margin: 0;
background-color: #14a7e0;
}
.lqd-header-menu ul li {
border-left: 1px solid #fff;
box-sizing: border-box;
color: #fff;
}
/* Individual Menu Items */
.lqd-header-menu li a {
color: #fff;
/* Set Menu Item Links to White */
display: block;
font-size: 1rem;
font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
text-transform: uppercase;
}
/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
border: medium none;
}
/* Adds Separator After Give */
.lqd-header-menu ul li:last-child {
border-right: 1px solid #fff;
}
推荐阅读
- java - 查找具有起始索引的最长公共子串
- ruby-on-rails - nil 的未定义方法“gsub”:NilClass -> 请求参数:无
- sql-server - 是否有任何简单的方法可以将多个 .txt 文件导入 SQL Server?
- angular - Angular 9 - 复杂的子/父导航
- java - SimpleDateFormat 无法正确解析 AM 或 PM
- python - 在python,pandas中使用另一个数据框的多列选择一个数据框的行
- angular - 如果 Angular 拦截器/服务中的值为 null,则发出一系列 http 请求
- asynchronous - 开玩笑 - 如何模拟网络延迟
- python - Python vs Perl 和字节数的正确性
- javascript - 在正则表达式中记录完整的单词