我正在尝试将导航栏项目的文本与bootstrap 4对齐。我的想法是将它们与ul的底部对齐,然后定位ul,但我似乎无法同时执行这两项操作。目标是让文本(大约)与品牌的高度相同:
我发现了一些问题,但大多数问题都是针对bootstrap 3的,或者由于某些我不理解的原因而无法正常工作。
这是示例html:
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<p style="vertical-align:bottom;" >Test</p>
</li>
<li class="nav-item<?php addActiveClass('/index.php'); ?>">
<a class="nav-link" href="index.php">Test</a>
</li>
<li class="nav-item d-none d-md-block"><img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"></li>
</ul>
</div>
我使用this bootstrap theme和示例css:
.navbar
{
padding:0rem 0.75rem;
}
.navbar-brand
{
padding: 0;
margin:0;
}
.navbar-nav > li
{
line-height: 36px;
padding: 0;
margin: 0;
background: red;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
.navbar-nav > li > p
{
padding: 0;
margin: 0;
background: yellow;
vertical-align: bottom;
}
这里有一个完整的例子: https://jsfiddle.net/d6n5z3gb/8/
答案 0 :(得分:2)
将 align-items-end
添加到navbar-nav
以将项目对齐到底部...
<ul class="navbar-nav align-items-end ml-auto">
<li class="nav-item" >
</li>
</ul>
然后,移除自定义line-height
...
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
Codeply更新:https://www.codeply.com/go/usR58ejrtg