尝试实现这样的功能: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缺少了什么:
<代码>G211
在我的例子中,我不知道如何插入导航栏,也不确定它是否有必要正确响应。
我也不确定将它作为一个列是不是正确的方法,它不应该在画布外吗?
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>
https://stackoverflow.com/questions/48996084
复制相似问题