如何在导航栏的同一行中同时制作导航品牌和登录按钮

Question

我有一个固定在顶部的导航栏。左边必须有一个公司的标志和名称。在右侧，必须有一个登录按钮。

我在网上看了很多例子，但它们都使用了 navbar-toggler-right，当网页在移动设备上时，它不应该出现在导航栏上。

这是我到目前为止能够做到的：

<nav class="navbar fixed-top navbar-light bg-faded">
    <a class="navbar-brand d-inline-flex" href="#">
        <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
         Company's name
    </a>
    <div class="navbar-nav">
        <a class="nav-item">
            <button type="button" class="btn btn-primary"> Log In</button>
        </a>
    </div>
</nav>

但是，我没有达到我想要的结果。 navbar-brand 占据所有宽度，登录按钮出现在下一行。

Webpage Preview

我怎样才能达到我想要的结果？我正在使用 Bootstrap 4 alpha 6.

Answer 1

<nav class="navbar fixed-top navbar-light bg-faded">
        <a class="navbar-brand d-inline-flex" href="#">
            <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
             Company's name
        </a>
        <div class="navbar-nav">
            <a href="#" class="btn btn-primary nav-item pull-right" role="button">Log In</a>
              </div>
    </nav>

Answer 2

使用 navbar-toggleable-xl 防止导航栏垂直堆叠。

http://www.codeply.com/go/oJ1GetCfsL

<nav class="navbar fixed-top navbar-toggleable-xl navbar-light bg-faded">
    <a class="navbar-brand" href="#">
        <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
         Company's name
    </a>
    <div class="navbar-nav ml-auto">
        <a class="nav-item">
            <button type="button" class="btn btn-primary"> Log In</button>
        </a>
    </div>
</nav>

默认情况下，导航栏始终是移动的（垂直堆叠），除非被 navbar-toggleable-* classes 之一覆盖。由于您希望导航栏始终保持水平，请使用 navbar-toggleable-xl class.

如何在导航栏的同一行中同时制作导航品牌和登录按钮

How to make both a nav-brand and a log-in button in the same row as navbar

html

nav

bootstrap-4