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

Posted 2023-03-05

【中文标题】如何使用 Bootstrap 4 创建固定的侧边栏布局？

【英文标题】：How to create a fixed sidebar layout with Bootstrap 4?

【发布时间】：2017-03-22 16:36:17

【问题描述】：

我正在尝试使用 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

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

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

【参考方案1】：

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

另请参阅：Fixed and scrollable column in Bootstrap 4 flexboxBootstrap col fixed positionHow to use CSS position sticky to keep a sidebar visible with Bootstrap 4Create a responsive navbar sidebar "drawer" in Bootstrap 4?

【讨论】：

不错的解决方案，但我们需要等待浏览器完全支持“粘性”

Re: #1 - 如果侧边栏内容的高度比视口高怎么办？使用这种方法，侧边栏最底部的内容会隐藏在视口之外，直到用户到达主区域内容的底部。侧边栏应允许滚动显示所有垂直内容。

我可以在右栏中创建另一个容器，否则会被视为不好的做法？

@BrianTag 这超出了原始问题的范围，但我不明白这个问题：codeply.com/go/YThL9dPewG

非常感谢。第一个解决方案就像一个魅力。

【参考方案2】：

这样的？

#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

【讨论】：

如果您在侧边栏内容中添加一些 lorem ipsum，您可以看到我最初的问题在此 sn-p 中重新创建。因为我们声明了一个固定位置，所以侧边栏不再尊重网格系统。

我编辑了代码并在侧边栏添加了max-width: 20%

是的，向容器声明最大宽度可以解决问题。谢谢！

如果您使用的是新的 Bootstrap 4 alpha 6+，则需要从列大小中删除“xs-”前缀。

在 col-4 中嵌套 col-12 的技巧对我来说非常有效

【参考方案3】：

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

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

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

【参考方案4】：

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

【参考方案5】：

我的版本：

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>