Twitter bootstrap 使用BS4将.navbar和.dropdown菜单折叠为hamburger菜单

使用Bootstrap 4和不使用Javascript，当视口很大时，如何创建这样的排列：

（导航项目向左浮动，用户链接向右浮动）

以及视口受约束时的类似排列：

我当前的代码如下（）：

---

正如您从上面的代码中看到的，当视口受到约束时，它不会按需要折叠。我怎样才能正确地完成它？

您能将代码放在JSFiddle（）或Plunker（）上吗。。因此其他人可以预览您的代码和结果well@RidoanSalehNasution更新了jsfiddle的链接：如果你想让它崩溃，你需要引导JavaScript。

<div id="heading" class="row">
  <nav id='main_links' class="navbar navbar-toggleable col float-left" role='navigation'>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class='logo navbar-brand' href="/">
       <img src="http://www.boden.co.uk/client-catalogue/images/letterb-38.png" alt="B" />
    </a>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class='navbar-nav'>
        <li id="main_link2" class='nav-item'><a href="#" class='nav-link'>Item-2</a>
        <li id="main_link3" class='nav-item'><a href="#" class='nav-link'>Item-3</a>
      </ul>
    </div>
  </nav>

<div id="loginarea" class="float-right">
<div class="dropdown">
  <a class="dropdown-toggle" href="/profile/john" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">john@email.com</a>

  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Settings</a>
    <a class="dropdown-item" href="#">Sign Out</a>
  </div>
</div>
</div>
</div>