Question

所以一直试图让我的导航栏中的菜单对齐到底部而不是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>

但是没有一个人有影响力。我可以把poss绝对放，但这似乎打败了使用flexbox的对象。我很确定它是li而不是ul进行对齐，尝试添加align-baseline，也没有运气。

本节中我想要与底部对齐

  <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;
}

将li链接到导航栏底部的Bootstrap 4 Alpha 6（flexbox）

0 个答案: