Bootstrap-在同一页面上粘贴两个div时出现问题

Question

嗨，我正在使用引导程序开发页面。在这里，我尝试将两个div贴在左边，另一个贴在右边。所以。当我尝试同时粘贴两个div时，左列div仅正确粘贴。右列div在左列后缀下方。我不确定为什么会这样。请帮助我完成这项工作。

$('.right-affix').affix({
  offset: {
    top: $('.right-affix').offset().top - $(".navbar").outerHeight(true)
  }
});

$('.left-sidebar').affix({
  offset: {
    top: $('.left-sidebar').offset().top - $(".navbar").outerHeight(true)
  }
});

html,
body {
  padding-top: 28px;
}

.left-sidebar {
  height: 100vh;
  background: #ffcc29;
}

.right-sidebar {
  background: #ccc;
}

.right-affix {
  padding: 20px 10px;
  background: #ffcc29;
}

.right-affix.affix-top,
.right-affix.affix-bottom {
  position: static;
}

.left-sidebar.affix-top,
.left-sidebar.affix-bottom {
  position: static;
}

.right-affix.affix {
  position: fixed;
  width: 100%;
  top: 56px;
  z-index: 1;
  background: #000;
  transition: all .35s ease;
}

.left-sidebar.affix {
  position: fixed;
  width: 100%;
  top: 56px;
  z-index: 1;
  background: #000;
  transition: all .35s ease;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark header fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<main>
  <div class="alert alert-primary mb-0" role="alert">
    This is a primary alert—check it out!
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4 left-sidebar">

      </div>
      <div class="col-8 right-sidebar">
        <h4 class="mt-3">
          This is right column
        </h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, metus at vestibulum rutrum, nulla felis dapibus ligula, sit amet hendrerit est nibh nec felis. Aliquam tincidunt odio id tellus scelerisque, et laoreet purus rhoncus. Nam
          suscipit suscipit neque, aliquet pulvinar velit maximus at. Integer sit amet rutrum nunc. Donec fringilla ante magna, sit amet ultricies neque ultrices non. Nullam a massa mauris. Vestibulum ut neque vulputate, aliquam sapien at, egestas metus.</p>
        <div class="right-affix">

        </div>
        <p>In magna felis, pellentesque iaculis augue at, lacinia faucibus felis. Nunc a ante et lectus bibendum commodo dapibus non ex. Sed quam tellus, tempor sed eleifend a, tempus eu elit. Nam scelerisque massa purus, et gravida lacus lacinia et. Praesent
          non tellus dui.
        </p>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, metus at vestibulum rutrum, nulla felis dapibus ligula, sit amet hendrerit est nibh nec felis. Aliquam tincidunt odio id tellus scelerisque, et laoreet purus rhoncus. Nam
          suscipit suscipit neque, aliquet pulvinar velit maximus at. Integer sit amet rutrum nunc. Donec fringilla ante magna, sit amet ultricies neque ultrices non. Nullam a massa mauris. Vestibulum ut neque vulputate, aliquam sapien at, egestas metus.
          In magna felis, pellentesque iaculis augue at, lacinia faucibus felis. Nunc a ante et lectus bibendum commodo dapibus non ex. Sed quam tellus, tempor sed eleifend a, tempus eu elit. Nam scelerisque massa purus, et gravida lacus lacinia et. Praesenthhfhth
          t t weueioyfe jfgequteo efherouitr ljfuoety8r fero8f7 felis. Nunc a ante et lectus bibendum commodo dapibus non ex. Sed quam tellus, tempor sed eleifend a, tempus eu elit. Nam scelerisque massa purus, et gravida lacus lacinia et. Praesenthhfhth
          t t weueioyfe jfgequteo efherouitr ljfuoety8r fero8f7 non tellus dui.
        </p>
      </div>
    </div>
  </div>
</main>