Twitter bootstrap 将li链接与引导4 Alpha 6(flexbox)导航栏中的底部对齐

Twitter bootstrap 将li链接与引导4 Alpha 6(flexbox)导航栏中的底部对齐,twitter-bootstrap,Twitter Bootstrap,所以我一直在尝试在导航栏中设置一个菜单,使其与li的底部对齐,而不是中间对齐 因为我有两个菜单,最上面的一个是呼叫我们和登录,最下面的一个是网页的各个部分 现在我的问题是,如何将顶部菜单与LI的底部对齐,而不是居中对齐。已尝试将文本底部对齐和底部对齐: <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <div class="container"> <but

所以我一直在尝试在导航栏中设置一个菜单,使其与li的底部对齐,而不是中间对齐

因为我有两个菜单,最上面的一个是呼叫我们和登录,最下面的一个是网页的各个部分

现在我的问题是,如何将顶部菜单与LI的底部对齐,而不是居中对齐。已尝试将文本底部对齐和底部对齐:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#"><object class="svgLogoBig" data="assets/svg/Logo.svg"></object></a>
        <div class="collapse navbar navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
            <div class="navbar-collapse collapse" id="collapsingNavbar3">
                <H1 class="firstMenuLine navbar-nav ml-auto w-100">DBFS</H1>
                <ul class="firstMenuLine navbar-nav ml-auto w-100 justify-content-end align-baseline">
                    <li class="nav-item align-text-bottom">
                        <a class="nav-link" href="tel:555-555-555">Call Us Now: <span class="phoneNumber">555-555-555<span></span></a>
                    </li>
                    <li class="nav-item align-bottom">
                        <a class="nav-link" href="open_login">Login</a>
                    </li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="collapsingNavbar3">
                <H2 class="secondMenuLine navbar-nav ml-auto w-100">Delivering Change                </H2>
                    <H2>
                    <ul class="secondMenuLine navbar-nav ml-auto w-100 justify-content-end">
                        <li class="nav-item">
                            <a class="nav-link py-1 pr-3" href="/news">Big1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-1 pr-3" href="/advice">Big2</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link py-1 pr-3" href="#">Big3</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-1 pr-3" href="/deliver">Big4</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link py-1 pr-3" href="/career">Big5</a>
                        </li>
                    </ul>
                    </H2>
            </div>
        </div>
    </div>
</nav>

你能发布所有的导航条形码吗。这只是折叠部分。很抱歉,上面的代码已更新
  <div class="navbar-collapse collapse" id="collapsingNavbar3">
                    <H1 class="firstMenuLine navbar-nav ml-auto w-100">DBFS</H1>
                    <ul class="firstMenuLine navbar-nav ml-auto w-100 justify-content-end align-baseline">
                        <li class="nav-item align-text-bottom">
                            <a class="nav-link" href="tel:555-555-555">Call Us Now: <span class="phoneNumber">555-555-555<span></span></a>
                        </li>
                        <li class="nav-item align-bottom">
                            <a class="nav-link" href="open_login">Login</a>
                        </li>
                    </ul>
                </div>
.align-text-bottom {
    vertical-align: text-bottom!important;
}