无法将导航中的内容对齐到Bootstrap 4中品牌名称的旁边

<nav class="navbar navbar-custom">
  <a class="navbar-brand" href="#">品牌名称</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">导航项1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航项2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">导航项3</a>
    </li>
  </ul>
</nav>

.navbar-custom .navbar-nav {
  float: left;
}