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

Question

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

Moj*_*imi 12 html css twitter-bootstrap bootstrap-4

试图实现这样的目标: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缺少什么:

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

在我的例子中,我无法弄清楚如何插入导航栏,不确定它是否有必要正确响应.

还不确定将它作为列是否是正确的方法,它不应该是在画布外吗？

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Zim*_*Zim 12

侧边栏导航可能非常复杂.这就是Bootstrap没有"开箱即用"组件的原因.Sidebars有很多注意事项:

响应 - 基于屏幕宽度的不同宽度,可见性或方向？
多级 - 导航项目是否具有子级别？这对高度有何影响？
可切换 - 可以通过按钮或"汉堡包"切换侧边栏吗？
推送与覆盖 - 页面内容隐藏在侧边栏的旁边或旁边？
向左还是向右 - 是页面内容左侧或右侧的侧边栏？
固定或粘滞 - 侧边栏如何定位在页面滚动上？

在这个"侧边栏"的情况下......使用而不是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>

Run Code Online (Sandbox Code Playgroud)

~~为了使动画更平滑,您必须覆盖Bootstrap的折叠过渡,该过渡通常适用于高度~~

编辑:

基于赏金请求,我更新了侧栏以及另外两个示例.这些更接近于示例,并且主要使用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%;
}

Run Code Online (Sandbox Code Playgroud)

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

完整版(非常接近示例):

此侧栏功能:

固定宽度
在较小的屏幕上自动关闭,在更宽的屏幕上打开
可以任意宽度切换打开/关闭
响应 - 在较小的宽度上成为固定的叠加

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

Run Code Online (Sandbox Code Playgroud)

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

无论是最小的和稳健的例子是更接近原来的例子.它很容易改变颜色和调整样式.这是另一种变体,侧边栏覆盖顶部的切换栏.

另请参阅:Bootstrap Navbar折叠到叠加边栏

Answer 2

Vic*_*uiz 5

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

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

要解决 #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>

Run Code Online (Sandbox Code Playgroud)

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

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

要解决 #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>

Run Code Online (Sandbox Code Playgroud)

此外，我在菜单中添加了一些 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%; 
}

Run Code Online (Sandbox Code Playgroud)

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

<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>

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

让我知道事情的后续！

归档时间：	7 年，6 月前
查看次数：	14779 次
最近记录：	5 年，9 月前