如何使用 Bootstrap 4 创建固定的侧边栏布局? [英] How to create a fixed sidebar layout with Bootstrap 4?

查看：130
本文介绍了如何使用 Bootstrap 4 创建固定的侧边栏布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

举一个基本的例子:

<div class="row"><div class="col-m-4" id="sticky-sidebar">侧边栏
<div class="col-m-8" id="main">主要区域

有可能获得这种布局，但一旦我声明，事情就会变得棘手:

.sidebar {位置:固定//或绝对}

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

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

解决方案

2020 年更新

这是最新的 Bootstrap 4.0.0 的更新答案.此版本的类可以帮助您创建粘性或固定侧边栏，而无需额外的 CSS....

使用sticky-top:

<div class="row py-3"><div class="col-3 order-2" id="sticky-sidebar"><div class="sticky-top">...

<h1>主要区域</h1>...

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

或，使用position-fixed:

<div class="row"><div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">...
<div class="col offset-3" id="main"><h1>主要区域</h1>...

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

另见:
Bootstrap 4 flexbox 中的固定和可滚动列
Bootstrap col 固定位置
如何在 Bootstrap 4 中使用 CSS 位置粘性保持侧边栏可见
创建响应式导航栏侧边栏抽屉"在 Bootstrap 4 中?

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.

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 main div starts appearing behind the 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.

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.

解决方案

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use 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://codeply.com/go/O9GMYBer4l

or, use 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>

Demo: https://codeply.com/p/0Co95QlZsH

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 创建固定的侧边栏布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆