带选项卡的引导导航

我找到了解决方案:我检查了具有此功能的库的CSS,并尝试模仿它。

最终解决方案:

CSS

.my_nav {
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.my_div {
    min-height: 56px;
    height: auto;
    display: flex;
    flex: 1;
}

.my_content {
    margin: 0;
    flex: 0 0 100%;

}

.nav-tabs .nav-link {
    padding: 0.55em 1.15em;
}

html

    <nav class="navbar navbar-expand my_nav ">

        <div class="my_div">
            <a href="{% url 'home' %}" class="navbar-brand">Home</a>

            <ul id="nav-mobile" class="navbar-nav ml-auto right">
                <li class="nav-item"><a class="nav-link ">Wellcome {{ user.username }}</a></li>
                <li class="nav-item"><a class="nav-link ">Log Out</a></li>
            </ul>
        </div>

        <div class="my_content">

            <ul class="nav nav-tabs ">
                <li class="nav-item"><a class="nav-link"  >Test 1</a></li>
                <li class="nav-item"><a class="nav-link"  >Test 2</a></li>
                <li class="nav-item"><a class="nav-link active" >Test 3</a></li>
            </ul>
        </div>
    </nav>