Question

当前，我尝试构建一个具有响应能力的导航栏。我将Bootstrap用于CSS。我想要的是：在一个小的视口上，所有链接（但Navbar品牌）都列在一行中。大视口上的导航栏如下所示（如预期）：

但是当我缩小视口时，导航栏看起来像这样：

我已经管理了一些视口配置，例如，用户名未显示在小视口上。 HTML如下所示（顺便说一句。我将仅显示一些模拟的nav项，因为这对问题并不重要：

HTML

<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
  <div class="navbar-nav flex-row">
    <ul class="navbar-nav mr-auto">

      <li class="nav-item">
        <a class="navbar-brand mr-0 mr-md-2">
          <img src="assets/loading-skull.png" width="30px" height="auto">
          Scare-me.com
        </a>
      </li>

    </ul>
  </div>

    <div class="navbar-nav">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link">Stories</a>
        </li>

      </ul>
    </div>

    <div class="mx-auto">
      <a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
    </div>
    <div class="navbar-nav">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link">Log In</a>
        </li>

        <li *ngIf="!isLoggedIn" class="nav-item">
          <a class="nav-link">Sign Up</a>
        </li>

        <li class="nav-item">
          <button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
        </li>
      </ul>
    </div>

</nav>

Answer 1

在不大幅度更改导航栏的整个html结构的情况下，要实现所需的目标似乎有点困难。我不确定您是否愿意这样做。因此，我建议为“故事”保留2个按钮。在移动视图中显示一个按钮，在桌面视图中显示另一个按钮。这样可以确保对HTML结构的回归影响最小。

桌面视图按钮

<ul class="navbar-nav mr-auto d-none d-md-block">
  <li class="nav-item">
    <a class="nav-link">Stories</a>
  </li>
</ul>

移动视图按钮

<ul class="navbar-nav mr-auto d-none d-md-block">
  <li class="nav-item">
    <a class="nav-link">Stories</a>
  </li>
</ul>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
  <div class="navbar-nav flex-row">
    <ul class="navbar-nav mr-auto">

      <li class="nav-item">
        <a class="navbar-brand mr-0 mr-md-2">
          <img src="assets/loading-skull.png" width="30px" height="auto"> Scare-me.com
        </a>
      </li>
    </ul>
  </div>

  <div class="navbar-nav">
    <ul class="navbar-nav mr-auto d-none d-md-block">
      <li class="nav-item">
        <a class="nav-link">Stories</a>
      </li>
    </ul>
  </div>

  <div class="mx-auto">
    <a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
  </div>
  <div class="navbar-nav">
    <ul class="navbar-nav mr-auto d-md-none">
      <li class="nav-item">
        <a class="nav-link">Stories</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link">Log In</a>
      </li>

      <li *ngIf="!isLoggedIn" class="nav-item">
        <a class="nav-link">Sign Up</a>
      </li>
      <li class="nav-item">
        <button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
      </li>
    </ul>
  </div>
</nav>

Bootstrap导航栏-将导航项包装到下一行

HTML

1 个答案: