如何将Bootstrap 4导航栏项对齐到底部

时间:2018-03-06 13:18:54

标签: css twitter-bootstrap bootstrap-4

我正在尝试将导航栏项目的文本与bootstrap 4对齐。我的想法是将它们与ul的底部对齐,然后定位ul,但我似乎无法同时执行这两项操作。目标是让文本(大约)与品牌的高度相同:

enter image description here

我发现了一些问题,但大多数问题都是针对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/

1 个答案:

答案 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