带标签的Bootstrap导航

Question

我想用这样的标签重现导航控件：

使用bootstrap和（https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/navs/） - 材料设计bootstrap ...

有没有办法将标签栏放在navbar-brand项下面？

Answer 1

我找到了解决方案：我检查具有此功能的库的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>