html - 导航栏上列表项的奇怪放置 - BOOTSTRAP 4

Question

我正在尝试使用 BOOTSTRAP 4 navbar，我在网页上看到了以下输出。

我真正想要的是下面的:

我正在使用以下代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

我尝试使用 list-inline 类来内联列表项，但没有任何效果。你能帮忙吗？谢谢。

Answer 1

存在一些问题，因为 Navbar 的结构不像典型的 Bootstrap 4 Navbar...

• 使用 flex-row 强制 navbar-nav 在所有宽度上保持水平

  <div class="pos-f-t">
      <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
              <h4 class="text-white">Collapsed content</h4>
              <span class="text-muted">Toggleable via the navbar brand.</span>
          </div>
      </div>
      <nav class="navbar navbar-dark bg-dark">
          <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                  <a class="nav-link" href="\">
                      <h5 class="text-white">
              <i class="fab fa-expeditedssl"></i> &nbsp; CVT</h5>
                  </a>
              </li>
          </ul>
          <ul class="navbar-nav ml-auto flex-row">
              <li class="nav-item active">
                  <a class="nav-link px-2" href="\">HOME
                          <i class="fas fa-home"></i>
                          <span class="sr-only">(current)</span>
                      </a>
              </li>
              <li class="nav-item">
                  <a class="nav-link px-2" href="\search">SEARCH
                          <i class="fas fa-search"></i>
                      </a>
              </li>
          </ul>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
      </nav>
  

https://www.codeply.com/go/zED6d4TC8B