Html 在引导程序4中，将div定位在垂直导航旁边

我试图在Bootstrap 4中将div放到垂直导航的右侧，但没有成功：

<div class="container mt-3">
  <div class="nav navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Some cool thing</a>
    <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#my-navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">Some menu entry</a>
        </li>
      </ul>
    </div>
  </div><!-- end of .nav -->

  <div class="row mt-2">
    <div class="nav flex-column nav-pills col-md-5">
      <a href="#" class="nav-link active">Something</a>
    </div>
    <div class="col-md-7 border">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

但是，右侧的导航和div边界几乎看不见，延伸得比它们应该延伸的更远，并且比顶部的导航栏更宽：

是一个演示问题的代码笔。有没有办法使用内置的引导类来解决这个问题？如果没有，如何手动修复此问题

---

如果我不使用，只是将组件放入，边界是正确的，但它们不再是一行，而是在彼此下方。

在引导中，您应该将.container放在.nav内，而不是放在.nav外。这允许.nav为全宽。然后用第二个容器装下后面的东西

你好，世界

---

在引导过程中，应该将.container放在.nav内部，而不是外部。这允许.nav为全宽。然后用第二个容器装下后面的东西

你好，世界 使用导航栏而不是顶部的导航。此外，第二导航应位于立柱内部，而不是立柱本身

使用导航栏而不是顶部的导航。此外，第二导航应位于立柱内部，而不是立柱本身

---

谢谢你的回答！在查看代码层时，div会比导航栏向右侧延伸得更远。不客气。因为边框在列上而不是列的内容上，所以它似乎会进一步扩展。试着把边界放在H1上。谢谢你的回答！在查看代码层时，div会比导航栏向右侧延伸得更远。不客气。因为边框在列上而不是列的内容上，所以它似乎会进一步扩展。试着把边界放在H1上。谢谢你的回答！这两种方法都非常有用，遗憾的是，我只能接受其中一种，但我同时使用了这两种方法！让我投票：谢谢你的回答！这两种方法都非常有用，遗憾的是，我只能接受其中一种，但我同时使用了这两种方法！请允许我投票：

<div class="container mt-3">
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Some cool thing</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="my-navbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Some menu entry</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- end of .nav -->

    <div class="row mt-2">
        <div class="col-md-5">
            <div class="nav flex-column nav-pills">
                <a href="#" class="nav-link active">Something</a>
            </div>
        </div>
        <div class="col-md-7 border">
            <h1>Hello world</h1>
        </div>
    </div>
</div>