Html 在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？

Question

提问by Mojimi

Trying to achieve something like this : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

试图实现这样的目标：https: //www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder to learn bootstrap.

我在网上看到过一些使用其他版本的bootstrap的例子，但是他们都对css改动太大了，这使得学习bootstrap变得更加困难。

I was wondering if in Bootstrap 4 this can be done using tools like collapse, stacked pills, flexbox?

我想知道在 Bootstrap 4 中是否可以使用折叠、堆叠药丸、flexbox 等工具来完成？

This is what I could achieve : https://jsfiddle.net/kL9u6esw/20/

这就是我可以实现的：https: //jsfiddle.net/kL9u6esw/20/

What is missing from my Jsfiddle :

我的 Jsfiddle 缺少什么：

Not correctly responsive
The navbar isn't scrolling properly with the sticky class
The menu button isn't sticky even though I set the class.
A background dimmer, although not necessary for the answer, would be great

没有正确响应
导航栏无法使用粘性类正确滚动
即使我设置了类，菜单按钮也不粘。
背景调光器，虽然不是答案所必需的，但会很棒

In my example I couldn't figure out how to insert a navbar, not sure if its necessary for it to be properly responsive.

在我的示例中，我无法弄清楚如何插入导航栏，不确定它是否需要正确响应。

Also not sure if having it as a columns is the correct way to do it, shouldn't it be off-canvas?

也不确定将它作为列是否是正确的方法，它不应该是画布吗？

Html code :

html代码：

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
          Lorem...
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

回答by Zim

Sidebar navs can be very complex. This is why Bootstrap doesn't have an "out-of- the-box" component. There are many considerations for Sidebars:

侧边栏导航可能非常复杂。这就是 Bootstrap 没有“开箱即用”组件的原因。Sidebars 有很多考虑因素：

Responsive - different width, visibility or orientation based on screen width?
Multi-level - do the nav items have sub levels? How will this impact height?
Toggleable - can the sidebar be toggled by a button or "hamburger"?
Push vs. Overlay - is page content hidden behind or next to the sidebar?
Left or right - is the sidebar to the left or right of page content?
Fixed or sticky - how is the sidebar positioned on page scroll?
Animation style - slide left/right/up/down?, collapse?

响应式 - 基于屏幕宽度的不同宽度、可见性或方向？
多级 - 导航项有子级吗？这将如何影响高度？
可切换 - 侧边栏可以通过按钮或“汉堡包”切换吗？
Push vs. Overlay - 页面内容是隐藏在侧边栏后面还是旁边？
左侧或右侧 - 侧边栏是在页面内容的左侧还是右侧？
固定或粘性 - 侧边栏如何定位在页面滚动上？
动画风格 - 向左/向右/向上/向下滑动？，折叠？

In this "sidebar" case... instead of using col-autoon the right column, use col. That way it will fill the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/

在这个“侧边栏”的情况下......而不是col-auto在右列上使用，使用col. 这样它会在菜单折叠时填充宽度：https: //jsfiddle.net/0rhyzu7o/

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
       ..
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
           ..
        </div>
      </div>
    </div>
  </div>
</div>

~~To make the animation a little smoother, you must override Bootstrap's collapsing transition which normally works on height~~

~~为了使动画更流畅，您必须覆盖通常适用于高度的 Bootstrap 的折叠过渡~~

EDIT:

编辑：

Based on the bounty request, I updated the sidebar with 2 more examples. These are closer to the example, and mostly use Bootstrap classes.

根据赏金请求，我用另外 2 个示例更新了侧边栏。这些更接近于示例，并且主要使用 Bootstrap 类。

Minimal version

最小版本

This version is closer to the example, and has the same slide left/right "drawer" animation.

此版本更接近示例，并且具有相同的向左/向右滑动“抽屉”动画。

body {
    height: 100vh;
    overflow-x: hidden;
    padding-top: 56px;
}

.vh-100 {
    min-height: 100vh;
}

.sidebar.collapse.show,
.sidebar.collapse.show + .col {
    transition: .18s ease;
    transform: translate(0,0,0);
    left: 0;
}

.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
    transition: .18s ease;
    transform: translate(-25%,0,0);
    z-index: 1050;
    left: -25%;
}

Demo minimal version: https://www.codeply.com/go/w1AMD1EY3c

演示最小版本：https: //www.codeply.com/go/w1AMD1EY3c

Full version(veryclose to the example):

完整版（非常接近示例）：

This sidebar features:

这个侧边栏有：

fixed-width
automatically closes on smaller screens, opens on wider screens
can be toggled open/closed at any width
responsive - becomes a fixed overlay on smaller widths

固定宽度
在较小的屏幕上自动关闭，在较宽的屏幕上打开
可以在任何宽度切换打开/关闭
响应 - 成为较小宽度上的固定覆盖

This full version does require a little more CSS, but some of it is optional...

这个完整版本确实需要更多的 CSS，但其中一些是可选的...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
   height: 100vh;
   overflow-x: hidden;
   padding-top: 55px;
}

/* set the sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

/* optional */
.vh-100 {
    min-height: 100vh;
}

/* optional for overlay sidebar on small screens */
@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
    <div class="row collapse show no-gutters d-flex h-100 position-relative">
        <div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
            <!-- spacer col -->
        </div>
        <div class="col px-2 px-md-0">
            <!-- toggler -->
            <a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
                <i class="fa fa-bars fa-lg"></i>
            </a>
        </div>
    </div>
</div>
<div class="container-fluid px-0 h-100">
    <div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
        <div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
            <!-- fixed sidebar -->
            <div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col p-3">
            <h3>Content..</h3>
            <p class="lead">Try this is full-page view to see the animation on larger screens!</p>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
        </div>
    </div>
</div>    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Demo full version: https://www.codeply.com/go/XJE8LOdX8k

演示完整版：https: //www.codeply.com/go/XJE8LOdX8k

Both the minimaland robustexamples are much closer to the original example. It's easy to change color and tweak the styles. Here's another variationwith the sidebar overlaying the toggle barat the top.

无论是最小的和稳健的例子是更接近原来的例子。更改颜色和调整样式很容易。这里的另一种变体与侧边栏覆盖拨动杆排在首位。

Also see: Bootstrap Navbar Collapse to Overlay Sidebar

另请参阅：Bootstrap Navbar Collapse to Overlay Sidebar

Answer 2

回答by Victoria Ruiz

So here's a possible solution to points 1-3.

因此，这是第 1-3 点的可能解决方案。

The key to solving #1was provided by @zimsystem: "Instead of using col-auto on the right column, use col. That way it will fill the width when the menu is collapsed."

@zimsystem 提供了解决 #1的关键：“不要在右列上使用 col-auto，而是使用 col。这样它会在菜单折叠时填充宽度。”

To solve #2, you need to get rid of h-100 in the first row and column:

要解决 #2，您需要摆脱第一行和第一列中的 h-100 ：

<div class="container-fluid h-100">
  <div class="row *h-100*">
     <div class="col-5 col-md-3 collapse m-0 p-0 *h-100* bg-dark" id="collapseExample">
     ...
     </div>
  </div>
</div>

(this is not correct code, I marked the classes you need to delete with asterisks)

（这不是正确的代码，我用星号标记了您需要删除的类）

Once you do this, the menu column will stretch to the full length of the content column.

执行此操作后，菜单列将拉伸到内容列的全长。

To solve #3, you just need to move the button out of a sub column, into the main column. It was staying in place within the mini column you had assigned it to.

要解决 #3，您只需要将按钮从子列中移到主列中。它留在您分配给它的迷你列中。

<div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">

     <div class="col-12">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in...
     </div>

Additionally, I added some CSS to the menu in case you end up having more links than in the example, so that they'll scroll properly if the list is too long for your screen.

此外，我在菜单中添加了一些 CSS，以防您最终拥有比示例中更多的链接，这样如果列表对于您的屏幕来说太长，它们就会正确滚动。

.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

The full code for this answer is here:

这个答案的完整代码在这里：

body{
  height : 100vh;
  overflow : scroll;
}

.collapse.width.show {
    transition: max-width .3s ease, min-width .3s ease;
    width: 100%;
    max-width: 100%;
    min-width: initial;
}
.collapse.width,
.collapsing.width {
   max-width: 0;
   min-width: 0;
   width: 0;
   transition: all .2s ease;
}
.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-5 col-md-3 collapse width m-0 p-0 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top"> 
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">
       
        <div class="col-12">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque egestas eleifend diam in tincidunt. Cras eget dignissim lacus. Praesent condimentum arcu nisi, ut ultrices lorem imperdiet sed. Suspendisse a elit quis erat volutpat bibendum. Proin metus odio, hendrerit at fermentum quis, suscipit id felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla nec mattis nibh, in dignissim turpis.

Integer sem nulla, malesuada non gravida sit amet, porttitor ac lorem. Nam gravida facilisis pulvinar. Maecenas lacinia tellus in diam pretium gravida. Pellentesque massa tellus, egestas sed odio vitae, convallis mollis massa. Duis at scelerisque nisi. Phasellus eu dapibus orci. Mauris tortor urna, vestibulum eget consectetur id, fringilla non sapien. Vivamus sagittis facilisis auctor. Pellentesque mollis posuere tincidunt. Fusce at mauris vel ante ullamcorper sollicitudin.

Phasellus nibh ex, fermentum id tristique vel, consequat a lectus. Donec consequat nec nulla et fringilla. Aenean in ligula in eros mollis auctor non facilisis leo. Fusce lectus lacus, convallis vel tempor et, mattis non urna. Suspendisse velit libero, dapibus ut augue et, semper tincidunt purus. Donec gravida felis non consequat sollicitudin. Ut imperdiet ante quis est rutrum bibendum at non eros. Pellentesque luctus, ipsum nec lacinia vestibulum, nulla lorem volutpat risus, sit amet dignissim nisl ipsum varius neque. In volutpat, quam quis aliquet luctus, nulla nibh hendrerit ex, et eleifend dolor odio et mi. Duis tempus sem vitae lacus imperdiet semper. Curabitur et consequat elit. Cras suscipit rhoncus elit, non volutpat ex vulputate pharetra. Donec nec elit sit amet tortor egestas maximus. Suspendisse risus neque, accumsan eu porttitor et, tincidunt quis nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam massa est, varius malesuada rhoncus sodales, bibendum at leo.

Nullam porta libero vel tortor maximus volutpat. Aenean maximus sollicitudin ipsum, vitae pulvinar sapien blandit sed. Vestibulum sed elit viverra, dignissim nisi at, tristique mi. Pellentesque in viverra nulla. Morbi porttitor, ligula id malesuada mattis, lorem libero tempor mauris, sed aliquet neque leo et nunc. Donec odio nibh, posuere at condimentum vel, laoreet in lacus. Nulla sollicitudin scelerisque urna, nec gravida arcu sagittis quis. Fusce auctor urna sed diam dignissim, at interdum lorem ornare. Fusce viverra, diam eu tempor volutpat, sapien turpis lacinia ligula, ac venenatis mi magna eget ante. Nullam dignissim blandit urna, vel consectetur dui venenatis ac. Cras volutpat, ligula in finibus mattis, sem quam ullamcorper ligula, eget ultricies ipsum mi vitae enim.

Proin porta lorem quis sem porttitor, nec lacinia enim viverra. Sed tortor dolor, congue vitae bibendum feugiat, efficitur non augue. Curabitur vitae nunc eget libero euismod fringilla. Nulla pretium dignissim lacus. Aliquam purus lorem, molestie vel turpis ac, euismod fermentum erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac varius massa, non tempus elit. Phasellus quis tortor iaculis est sollicitudin rutrum id non mi. In eget pharetra justo. Morbi vitae commodo eros. Quisque facilisis blandit laoreet. 
        </div>
      </div>
    </div>
  </div>
</div><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Let me know how it goes!

让我知道事情的后续！

Html 在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？

提问by Mojimi

回答by Zim

EDIT:

编辑：

回答by Victoria Ruiz

相关推荐

最近更新

标签

Html 在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？

提问by Mojimi

回答by Zim

EDIT:

编辑：

回答by Victoria Ruiz

相关推荐

Html 如何将图像放入 bootstrap div 中？

Html 通过 JavaScript 按类更改值属性

Html 如何在引导程序 4 中删除轮廓

Html html标签使用大写字母是不是不好？

相关推荐

最近更新

标签