如何仅隐藏引导侧边栏的一部分？答案

【问题标题】：How to hide only part of bootstrap sidebar?如何仅隐藏引导侧边栏的一部分？
【发布时间】：2021-05-27 04:42:45
【问题描述】：

我想从'vue-bootstrap'创建一个侧边栏，它在点击时被隐藏，但我只想隐藏这个侧边栏的 80% 宽度，那么，如何只隐藏侧边栏的一部分？

<b-button v-b-toggle.sidebar-1 class="toogle-sidebar">
        <span>Toogle sidebar</span>
</b-button>


<b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      :backdrop-variant="variant"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <b-form-group label="Backdrop variant" label-for="backdrop-variant">
          <b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
        </b-form-group>
      </div>
    </b-sidebar>

我想在 Gitlab 辅助工具栏中创建类似的东西，当我点击 hide sidebar 时，我只看到菜单图标，谁能告诉我该怎么做？

感谢您的帮助！

【问题讨论】：

我使用过 Vue 2 和 Bootstrap 4，但没有使用过 vue-bootstrap（搜索实际上找到了 bootstrap-vue）。一般来说，我的方法是创建两个版本的侧边栏，并通过点击事件显示您想要的版本。可能有解决问题的最佳实践方法

标签： javascript html css vue.js bootstrap-4

【解决方案1】：

使用 v-model 代替指令并为其附加一个类：然后您可以使用 CSS 动画覆盖默认 CSS 值：

new Vue({
  el: "#app",
  data() {
    return {
      sidebar: false,
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebar = !this.sidebar
    }
  }
})

.b-sidebar-outer.closed #sidebar-backdrop {
  display: block !important;
  transform: translateX(-270px);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
  animation-direction: reverse;
}

.b-sidebar-outer:not( .closed) #sidebar-backdrop {
  transform: translateX(0);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
}

@keyframes sidebarAnim {
  0% {
    transform: translateX(-270px);
    animation-timing-function: ease-in-out
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-in-out
  }
}

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button @click="toggleSidebar">TOGGLE SIDEBAR</b-button>
      </b-col>
      <b-sidebar id="sidebar-backdrop" v-model="sidebar" title="Sidebar with backdrop" backdrop-variant :class="{ closed: !sidebar }" backdrop shadow>
        asdfsadf
      </b-sidebar>
    </b-row>
  </b-container>
</div>

【讨论】：