vuebootstrap b-collapse: when sidebar collapse, change margin-left content div

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/57173948/vuebootstrap-b-collapse-when-sidebar-collapse-change-margin-left-content-div

标签

Vue.js

bootstrap-vue