品牌旁边的 bootstrap 4 内嵌文本

Question

如何在一行中获得品牌旁边的导航栏文字？ 我在http://zeroplanet.gq/test.html 有测试页，其中是 text ,,Hello, Admin”，但此文本不是内联的。

代码如下：

<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark">
    <div class="nav-item">
        <a href="/" class="navbar-brand text-white">
        <img src="#" width="30" height="30" class="d-inline-block align-top" alt="">
        <b>Zero</b>Planet </a>
    </div>
    <div class="text-light mr-auto">Welcome, Admin</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <div class="nav navbar-nav ml-auto">
            <a href="#" class="btn btn-link text-white">Test</a>
            <a href="#" class="btn btn-link text-white">Test</a>
            <a href="#" class="btn btn-link text-white">Error page</a>
            <a href="#" class="btn btn-link text-white">Account</a>
            <a href="#" class="btn btn-dark border border-white">Logout</a>
        </div>
    </div>
</nav>

有人可以帮助我吗？谢谢

编辑：我发现如果我尝试使用 class="collapse navbar-collapse" 删除 div，文本是内联的，但我需要这个 div 用于移动工具。 想法？

Answer 1

collapse div 类未折叠时太大。

您可以尝试在此行使用“ma​​x-width”css 属性：

<div class="collapse navbar-collapse" id="navbarNav">

或此处的“最小宽度”：

<div class="text-light mr-auto">Welcome, Admin</div>