Question

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

这是代码：

<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 =＆＃34删除div;折叠navbar-collapse＆＃34;文本是内联的，但我需要这个移动toogle的div .. 想法？

Answer 1

崩溃div类在未折叠时太大。

您可以尝试使用＆＃34; max-width ＆＃34;这一行的css属性：

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

或＆＃34; min-width ＆＃34;这里：

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

bootstrap 4品牌旁边的内联文字

1 个答案: