[英]Create a responsive navbar sidebar “drawer” in Bootstrap?
試圖實現這樣的目標： 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>
Bootstrap 5 Beta 3（2021 年更新）
現在有一個官方的Bootstrap 5 Offcanvas 組件，可以更輕松地創建側邊欄。 當然，它仍然可以在不使用 Offcanvas 組件的情況下完成，例如Bootstrap 5 的這個側邊欄示例
Bootstrap 4（原始答案）
側邊欄導航可能非常復雜。 這可能就是 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>
為了使動畫更流暢，您必須覆蓋通常適用於高度的 Bootstrap 的折疊過渡
根據賞金請求，我用另外 2 個示例更新了側邊欄。 這些更接近於示例，並且主要使用 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
完整版（非常接近示例）：
這個側邊欄有：
這個完整版本確實需要更多的 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
因此，這是第 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>
（這不是正確的代碼，我用星號標記了您需要刪除的類）
執行此操作后，菜單欄將延伸至內容欄的全長。
要解決 #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>
讓我知道它是怎么回事！
vuejs 中帶有側邊欄的響應式導航欄（ bootstrap 或 bootstrap-vue ）
[英]Responsive navbar with sidebar in vuejs ( bootstrap or bootstrap-vue )
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.