问题描述
我对Vue Bootstrap,b折叠(导航栏,边栏,内容)有疑问
I have a problem with Vue Bootstrap, b-collapse (navbar, sidebar, content)
https://jsfiddle.net/Lvkjn7he/1/
When click on navbar-toggler-icon (burger icon) (v-b-toggle="'sidebar-fifi-toggle'") into div b-navbar, the div sidebar collapase (), but the content div remains in its position.
<style>
#app {
width: 500px;
}
.content {
margin-left: 185px;
top: 50px;
}
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
width: 190px;
z-index: 1000;
padding: 5px;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid #eee;
padding-left: 0;
padding-right: 0;
min-height: calc(100vh - 56px);
transition: all 0.3s;
}
</style>
<div id="app">
<b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">
<a href="javascript:void(0)" id="menu-toggle" v-b-toggle="'sidebar-fifi-toggle'"><span class="navbar-toggler-icon mb-1 mr-sm-1" aria-hidden="true"></span></a>
<b-navbar-brand href="index.html">brand
</b-navbar-brand>
<b-nav-form>
<b-form-input type="text" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Username"></b-form-input>
<b-form-input type="password" class="mb-1 mr-sm-1 mb-sm-0" placeholder="Password"></b-form-input>
<b-button type="submit" variant="success" class="my-2 my-sm-0">Login</b-button>
</b-nav-form>
</b-navbar>
<b-collapse visible id="sidebar-fifi-toggle">
<div class="sidebar bg-white scrollable-menu">
<ul class="list-unstyled">
<li>
<a href="javascript:void(0)" role="button" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-fw fa-address-card"></i> MENU 1</a>
<ul id="submenu1" class="list-unstyled collapse show">
<li><b-link :to="{name:'home'}">- Home S</b-link></li>
<li><b-link :to="{name:'about'}">- About S</b-link></li>
<li><b-link :to="{name:'contact'}">- Contact S</b-link></li>
</ul>
</li>
</ul>
</div>
</b-collapse>
<main class="content col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>CONTENT - vue</h1>
</main>
</div>
<script>
new Vue({
el: '#app',
mounted() {
this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
if (isJustShown == false) {
console.log('navbar false:', isJustShown)
}
if (isJustShown == true) {
console.log('navbar true:', isJustShown)
}
})
}
})
</script>
I needed to know how when sidebar collapse (false), the margin-left of content div set to {margin-left: 0px;}, and when visible (true) set to {margin-left: 185px;}
when true:
when false:
Thanks in advance
You can solve this with the following selector:
.collapse.show ~ .content {
margin-left: 185px;
}
.content {
top: 50px;
}
Be aware a few bootstrap classes on main that gives main left margin.
But as this doesn't look very smooth I suggest to use: https://bootstrap-vue.js.org/docs/components/collapse/#v-model-support
这篇关于vuebootstrap b折叠:当边栏折叠时,更改margin-left content div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!