时间戳

首页 > 解决方案 > vuebootstrap b-collapse：侧边栏折叠时，改变margin-left内容div

vue.js - vuebootstrap b-collapse：侧边栏折叠时，改变margin-left内容div

问题描述

我对 Vue Bootstrap、b-collapse（导航栏、侧边栏、内容）有疑问

https://jsfiddle.net/Lvkjn7he/1/

当点击navbar-toggler-icon(汉堡图标)(vb-toggle="'sidebar-fifi-toggle'")进入div b-navbar时，div侧边栏collapase()，但div内容保持在原位。

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

我需要知道当侧边栏折叠 (false)、内容 div 的左边距设置为 {margin-left: 0px;} 以及何时可见 (true) 设置为 {margin-left: 185px;}

当为真时：

图 1

假时：

图 2

提前致谢

标签： vue.jsbootstrap-vue

解决方案

您可以使用以下选择器解决此问题：

.collapse.show ~ .content {
  margin-left: 185px;

}

.content {
  top: 50px;
}

请注意 main 上的一些引导类，它们提供了主要的左边距。

但由于这看起来不太顺利，我建议使用：https ://bootstrap-vue.js.org/docs/components/collapse/#v-model-support

推荐阅读