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

Posted 2023-02-22

【中文标题】vue bootstrap b-collapse：侧边栏折叠时，改变margin-left内容div

【英文标题】：vuebootstrap b-collapse: when sidebar collapse, change margin-left content div

【发布时间】：2019-12-02 01:52:23

【问题描述】：

我对 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】：

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

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



.content 
  top: 50px;

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

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