html - 我的导航栏在手机中垂直堆叠。我希望它水平排成一行

Question

单击下面的链接，您将看到导航栏在移动设备中垂直堆叠。我希望它在同一个手机中排成一行。

http://www.responsinator.com/?url=localhost%2FAssignment%2520App%2Fbasic.html%23

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xl-12">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.php">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="register.php">Register</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

我认为最简单的方法是从 navbar-expand-sm 中删除 sm。所以它只会是 navbar-expand

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xl-12">
    <nav class="navbar navbar-expand bg-dark navbar-dark fixed-top">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.php">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="register.php">Register</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

如果你让我的 fiddle更小你可以看到它。 navbar-expand-sm 表示在小屏幕时会折叠起来。您可以将 sm 更改为 -md、-lg 或 -xl。这代表屏幕尺寸引用:https://getbootstrap.com/docs/4.0/components/navbar/