Html 如何使用 Bootstrap 4 创建固定的侧边栏布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40497288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a fixed sidebar layout with Bootstrap 4?
提问by cinnaroll45
I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.
我正在尝试使用 Bootstrap 4 创建类似于屏幕截图的布局，但是我在修复侧边栏并同时实现此布局时遇到了一些问题。
Going with a basic example:
举一个基本的例子：
<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>
It's possible to get this layout but things get tricky once I declare:
有可能获得这种布局，但一旦我声明，事情就会变得棘手：
.sidebar {
position: fixed // or absolute
}
Once I make the sidebar sticky, the maindiv starts appearing behindthe sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.
一旦我使侧边栏变得粘滞，主div 开始出现在侧边栏后面而不是旁边。当然，可以声明一些边距并将其推回原来的位置，但这会使响应性变得复杂。
I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.
我觉得我错过了一些东西，我阅读了 Bootstrap 4 文档，但我找不到实现这种布局的简单方法。
回答by Zim
Updated 2018
2018 年更新
Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a stickyor fixed sidebarwithout the extra CSS....
这是最新Bootstrap 4.0.0的更新答案。这个版本有一些类可以帮助你在没有额外 CSS 的情况下创建一个粘性或固定的侧边栏......
Use sticky-top:
使用sticky-top：
<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>
Demo:https://www.codeply.com/go/O9GMYBer4l
演示：https : //www.codeply.com/go/O9GMYBer4l
or, use position-fixed:
或者，使用position-fixed：
<div class="container-fluid">
<div class="row">
<div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
...
</div>
<div class="col offset-3" id="main">
<h1>Main Area</h1>
...
</div>
</div>
</div>
Also see:
Fixed and scrollable column in Bootstrap 4 flexbox
Bootstrap col fixed position
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
另请参阅：
Bootstrap 4 flexbox 中的固定和可滚动列
Bootstrap col 固定位置
如何使用 CSS 位置粘性来保持侧边栏在 Bootstrap 4 中可见 在 Bootstrap 4 中
创建响应式导航栏侧边栏“抽屉”？
回答by GvM
something like this?
像这样的东西？
#sticky-sidebar {
position:fixed;
max-width: 20%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-xs-8" id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div回答by Michel Fernandes
I'm using the J.S. to fix a sidebar menu. I've tried a lot of solutions with CSS but it's the simplest way to solve it, just add J.S. adding and removing a native BootStrap class: "position-fixed".
我正在使用 JS 来修复侧边栏菜单。我用 CSS 尝试了很多解决方案，但这是解决它的最简单方法，只需添加 JS 添加和删除本机 BootStrap 类：“位置固定”。
The J.S.:
JS：
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;
}
}
The HTML:
HTML：
Sidebar:
侧边栏：
<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>
回答by Szurdoki Gábor
My version:
我的版本：
div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }
<div id="dashside"></div>
<div id="dashmain">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">Content</div>
</div>
</div>
</div>
