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

时间:2018-11-16 17:27:15

标签: html css twitter-bootstrap flexbox

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

但是当我缩小视口时,导航栏看起来像这样:
enter image description here

我已经管理了一些视口配置,例如,用户名未显示在小视口上。 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>

1 个答案:

答案 0 :(得分: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>