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

Question

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

[我已经在网上看到了一些使用其他版本的引导程序的示例，但是它们都改变了CSS太多，这使得学习引导程序更加困难。

我想知道在Bootstrap 4中是否可以使用折叠，叠丸，flexbox之类的工具来完成此工作？

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

我的Jsfiddle中缺少什么：

响应不正确
导航栏在粘性类中无法正确滚动
即使我设置了课程，菜单按钮也不粘滞。
尽管不需要背景调光器，但很好

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

还不确定是否将其作为列进行操作是否正确，难道不应该超出画布吗？

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

侧边栏导航可能非常复杂。这就是Bootstrap没有“开箱即用”组件的原因。 [侧边栏有很多注意事项：

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

在这种“侧边栏”情况下...而不是使用右列的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>

~~为了使动画更加平滑，必须覆盖Bootstrap的折叠过渡，该过渡通常在高度上起作用~~

编辑：

根据赏金要求，我用另外2个示例更新了边栏。它们更接近example，并且大多使用Bootstrap类。

最低版本

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

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%;
}

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

完整版本（非常接近example）：

此边栏功能：

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

此完整版本确实需要更多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>

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

minimal和robust的例子都更接近original example。更改颜色和调整样式很容易。这是另一个变体，顶部带有sidebar overlaying the toggle bar。

另请参见：Bootstrap Navbar Collapse to Overlay Sidebar

Answer 2

所以这是第1-3点的可能解决方案。

要

解决＃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>

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

一旦执行此操作，菜单列将延伸到内容列的整个长度。

要

解决＃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>
另外，我在菜单中添加了一些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%; }
此答案的完整代码在这里：

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>
让我知道怎么回事！

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

问题描述投票：12回答：2

2个回答

编辑：

最新问题

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

问题描述 投票：12回答：2

2个回答

编辑：

最新问题

问题描述投票：12回答：2