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

Question

我正在尝试使用 Bootstrap 4 创建类似于屏幕截图的布局，但我在固定边栏和同时实现此布局时遇到了一些问题。

看一个基本的例子：

<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>

获得此布局是可能的，但一旦我声明，事情就会变得棘手：

.sidebar {
position: fixed // or absolute
}

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

我觉得我错过了什么，我阅读了 Bootstrap 4 文档，但我找不到实现此布局的简单方法。

Answer 1

是这样的吗？

#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

Answer 2

我的版本：

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>

Answer 3

2020 年更新

这是最新 Bootstrap 4.0.0 的更新答案。这个版本有类可以帮助你创建一个 sticky 或 fixed sidebar 而没有额外的 CSS...

使用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>

演示： https://codeply.com/go/O9GMYBer4l

或，使用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>

演示： https://codeply.com/p/0Co95QlZsH

另见：

Bootstrap col fixed position

Answer 4

我正在使用 J.S。修复侧边栏菜单。我用 CSS 尝试了很多解决方案，但这是解决它的最简单方法，只需添加 J.S。添加和删除原生 BootStrap class: "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>

Answer 5

我在我的代码中使用了这个：

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

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

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

How to create a fixed sidebar layout with Bootstrap 4?

html

css

twitter-bootstrap

bootstrap-4