Bootstrap 4导航栏项目跳到下面并包装

Question

我正在尝试使用最新的bootstrap4（alpha6）创建一个导航栏。

<nav role="navigation" class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>

使用bootstrap 4使导航品牌和物品适合一行的最佳方法是什么？ 这是Codeply

的链接

Answer 1

阅读docs for the navbar。

使用navbar-nav代替nav和navbar-toggleable-*类，使导航保持水平，直到特定断点垂直折叠为止。

<nav role="navigation" class="navbar navbar-light bg-faded navbar-toggleable-md">
    <a class="navbar-brand" href="/">
        <img src="/public/img/logo.png" height="36" alt="myLogo">
         Food on Track
    </a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <svg>
            </svg>
        </li>
    </ul>
</nav>

演示：https://www.codeply.com/go/iAGnRLMCE1

更新2018年

在Bootstrap 4.0.0 navbar-toggleable-*已更改为navbar-expand-*

Answer 2

试试这个

<nav role="navigation" class="navbar navbar-light bg-faded">
<div class="row">
<div class="col-md-10">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
</div>
<div class="col-md-2">
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>
</div>
</div>
</nav>