Bootstrap 4 如何显示图像+；navbar品牌引导4中的文本？

我需要一个图像旁边的一些文字对我的导航栏品牌。我曾尝试过几次，但都没有成功

如何做到这一点而不“黑客”引导

这是我的密码：

<header>
    <nav class="navbar navbar-dark fixed-top">
        <section class="container">
            <section class="navbar-header">
                <a ui-sref="home" class="navbar-brand">
                    <img id="logo" class="d-inline-block mr-1" alt="Logo" src="https://images.vexels.com/media/users/3/137380/isolated/lists/1b2ca367caa7eff8b45c09ec09b44c16-instagram-icon-logo.png">
                    <span class="align-text-bottom">InstaClone!</span>
                </a>
            </section>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" ui-sref="chat">Chat</a>
                </li>
            </ul>
        </section>
    </nav>
</header>

InstaClone！


聊天

如果您使用的是Bootstrap 4 alpha 6，请尝试以下方法

img#logo{宽度：50px；}

聊天

这种方法奏效了。我只是不知道这不是一个坏习惯。谢谢