html - 在Bootstrap 4中创建响应式导航栏边栏 “drawer”吗？

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

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

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

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

我的Jsfiddle缺少什么:

响应不正确

导航栏无法与粘性类

一起正确滚动

即使设置了类，菜单按钮也不是很粘。

尽管不需要答案，但背景调光器还是不错的

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

还不确定是否将其作为列是否是正确的方法，难道它不是 Canvas 吗？

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>

最佳答案

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

自适应-基于屏幕宽度的不同宽度，可见性或方向？

多级-导航项是否具有子级？这个高度会受到怎样的影响？

可切换-边栏是否可以通过按钮或“汉堡包”进行切换？

推送与重叠-页面内容是隐藏在侧边栏的后面还是旁边？

左侧还是右侧-页面内容左侧还是右侧的侧边栏是？

固定或固定-边栏在页面滚动中的位置如何？

动画样式-向左/向右/向上/向下滑动？是否折叠？

在这种“边栏”情况下...而不是在右列上使用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://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://codeply.com/go/XJE8LOdX8k



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

另请参阅:Bootstrap Navbar Collapse to Overlay Sidebar

关于html - 在Bootstrap 4中创建响应式导航栏边栏 “drawer”吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48996084/