Html 如何使用Bootstrap 4创建固定的边栏布局？

我正在尝试使用Bootstrap4创建一个类似屏幕截图的布局，但是我在修复侧边栏和同时实现此布局方面遇到了一些问题

下面是一个基本示例：

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

一旦我使边栏变粘，主div开始出现在边栏的后面，而不是旁边。当然，可以声明一些保证金，并将其推回到原来的位置，但这会使响应变得复杂

我觉得我遗漏了一些东西，我阅读了Bootstrap4文档，但是我找不到一个简单的方法来实现这个布局。

类似的东西

#粘性侧边栏{
位置：固定；
最大宽度：20%；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
我的版本：

div#dashmain{左边距：150px；}
div#dashside{位置：固定；宽度：150px；高度：100%；}


内容
更新至2020年

下面是最新的引导程序4.0.0的更新答案。这个版本有一些类可以帮助您创建一个粘性的或固定侧边栏，而不需要额外的CSS

使用粘性顶部

：

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

演示：

另请参见：

---

我正在使用J.S.修复侧边栏菜单。我用CSS尝试了很多解决方案，但这是最简单的解决方法，只需添加J.s.添加和删除本机引导类：“position fixed”

J.S.：

var lateral = false;
function fixar() {

            var element, name, arr;
            element = document.getElementById("minhasidebar");

            if (lateral) {
                element.className = element.className.replace(
                        /\bposition-fixed\b/g, "");
                lateral = false;
            } else {

                name = "position-fixed";
                arr = element.className.split(" ");
                if (arr.indexOf(name) == -1) {
                    element.className += " " + name;
                }
                lateral = true;
            }

        }

HTML：

侧栏：

<aside>
        <nav class="sidebar ">
             <div id="minhasidebar">
                 <ul class="nav nav-pills">
                     <li class="nav-item"><a class="nav-link active" 
                     th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i> 
                     <span>Hoje</span>
                     </a></li>
                 </ul>
             </div>
        </nav>            
</aside>

我在代码中使用了这个：

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

....

---

这会导致侧边栏高度变为100%并固定在顶部。

如果您在侧边栏内容中添加一些lorem ipsum，您可以看到我最初的问题在这个片段中重新出现。因为我们正在声明一个固定位置，所以边栏不再考虑网格系统。我编辑了代码，并在边栏中添加了

max width:20%

。是的，向容器声明max width解决了这个问题。谢谢如果您使用的是新的引导程序4 alpha 6+，则需要从列大小中删除“xs-”前缀。在col-4中嵌套col-12的技巧对于menice解决方案非常有效，但我们需要等待browsersRe中完全支持“粘性”：1-如果边栏内容的高度高于视口，该怎么办？使用此方法，侧边栏最底部的内容将隐藏在视口之外，直到用户到达主区域内容的底部。侧边栏应该允许滚动显示所有垂直内容。我是否可以在右栏中创建另一个容器，或者这将被视为一种不好的做法？@Briantg这超出了原始问题的范围，但我不理解这个问题：非常感谢。第一个解决方案很有魅力。

<aside>
        <nav class="sidebar ">
             <div id="minhasidebar">
                 <ul class="nav nav-pills">
                     <li class="nav-item"><a class="nav-link active" 
                     th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i> 
                     <span>Hoje</span>
                     </a></li>
                 </ul>
             </div>
        </nav>            
</aside>

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....