Html 引导4-将两层链接与导航栏的顶部和底部对齐

我有一组链接，我想与

导航栏的顶部和底部对齐。具体而言，这种安排：


在玩了下面答案中的Irfandy Jip的代码，以及我自己的持续研究之后，我想出了以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
    <a class="navbar-brand" href="{{ path('_home') }}">
        <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
        <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
            <div class="nav-item mb-lg-5">
                <div class="btn-group">
                    <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href="">Login</a>
                    </button>
                    <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href="">Sign Up</a>
                    </button>
                </div>
            </div>

            <div class="nav-item mb-lg-5">
                <div class="btn-group btn-group-lg">
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
                    </button>
                </div>
            </div>

            <a class="nav-link d-lg-none" href="">Login</a>
            <a class="nav-link d-lg-none" href="">Sign Up</a>
        </div>

        <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
            <div class="input-group">
                <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>
</nav> <!-- end nav -->



其结果如下：


这真的很接近我想要的，除了整个
navbar
是如何在底部增长的，毫无疑问这是我添加的边距的结果（填充做同样的事情）。理想情况下，社交媒体图标将与搜索栏位于同一条线上，登录和注册链接位于搜索栏顶部，与当前一样

以下是与布局草图的比较：


我还能做些什么让右边的链接看起来更像上一张图片吗？
更新于2018年11月27日，由于问题已更新，我的旧答案不再足够。实际上，@Nandita已经对您的答案做了一点回答，但是因为您喜欢我的JSFIDLE，所以我再次修改了它，使它看起来更好

你只需要自己设置“搜索栏”的宽度


要实现与示例更相似的效果，我认为您应该删除nav项中的填充。然后在nav类中添加填充

<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange p-3" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
    <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
    <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
        <div class="nav-item">
            <div class="btn-group">
                <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Login</a>
                </button>
                <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Sign Up</a>
                </button>
            </div>
        </div>

        <div class="nav-item">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
                </button>
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
                </button>
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
                </button>
            </div>
        </div>

        <a class="nav-link d-lg-none" href="">Login</a>
        <a class="nav-link d-lg-none" href="">Sign Up</a>
    </div>

    <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
        <div class="input-group">
            <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
                <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
            </div>
        </div>
    </form>
</div>




对于第二个问题，只需添加另一个具有nav项目类的div
即可从nav项目中删除
mb-lg-5
类


使用css flextbox和
对齐项目：flex-end

以下是更新的代码段：


form.form-inline{
显示：flex！重要；
宽度：100%！重要；
对齐项目：柔性端；
}
.form inline.input组，
.form inline.nav项{
宽度：33.33%！重要；
}
.导航栏导航{
位置：绝对位置；
右：20px；
排名：0；
}
.nav项目.btn组{
浮动：对；
}
.导航链路{
填充：0 1rem！重要；
}
@仅介质屏幕和（最大宽度：991px）{
.导航栏导航{
职位：继承；
}
}
这是您想要的，请全屏检查输出：



代码与图像中显示的代码不匹配。你能发布完整的代码吗？@Zim我在这篇编辑文章中发布了完整的代码，这篇文章对最上面的两个按钮非常有效，所以谢谢：）请看我对我原来的问题所做的编辑。。。在登录和注册时，我如何在导航栏底部的同一侧添加一系列链接/按钮？有可能吗？