Bootstrap 4导航-移动视图

Question

我有以下标题，其中包括Bootstrap 4导航：

<div class="header container-fluid">

  <div class="row">



<div class="brand col-sm-10 offset-sm-1">
  Logo
</div>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto">

      <li class="nav-item active">
        <a class="nav-link" href="#">Welcome<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Pricing
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_angebot">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Our Company
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen">
          <a class="dropdown-item" href="#">History</a>
          <a class="dropdown-item" href="#">Career</a>
          <a class="dropdown-item" href="#">Clients</a>
        </div>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="#">Get here<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

  </div>
</div>

我做了一些更改，因为我希望导航项目居中并伸展到行/列的最开始处。然而，现在我的手机导航不再工作了，我也不知道为什么。

这是我的导航的SASS：

.brand {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100px;
}

.navbar {
  height: 50px;
  background-color: white !important;
  padding: 0 !important;

  .navbar-nav {
      display: table;
      width: 100%;
      list-style: none;

      .nav-link {
        padding: 0 !important;
      }

      li {
      display: table-cell;
      text-align: center;

        a {
          // background-color: yellow;
          display: block;

        }

      }

      li:first-child {
        text-align: left;
      }

      li:last-child {
        text-align: right;
      }




    .nav-item {
      // margin: 30px;

    }
  }
}

这是一个jsfiddle：https://fiddle.jshell.net/fmz6hafz/

现在，所有内容都水平对齐了，在移动视图中也是如此。我怎样才能恢复到原来的bootstrap mobile视图呢？