javascript - 在导航栏附近插入文本(菜单)

Question

我正在使用 bootsrap 4 alpha 6 和 midnight.js 来更改导航菜单切换器的颜色。我想在它旁边插入一个文本(菜单)。捕获中的示例。对于文本切换器，我使用 fontawesome。

感谢您的宝贵时间和帮助!

源代码

<div class="navigation-button">
    <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars fa-2x"></span>
    </button>
</div>

使用 midnight.js，看起来像这样

<div class="navigation-button">
        <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div></button>
    </div>

它工作正常，只是我想向它添加一个文本。现在它看起来像:

我想要

我试过了

MENU<span class="fa fa-bars fa-2x"></span>

看起来

Answer 1

尝试添加 display:inline;到你的图标:

<span class="fa fa-bars fa-2x" style="display:inline;"></span>