如何使我的侧边栏仅适合外部div

Question

这是我的Vue代码，我正在使用bootstrap-vue，我正在使用卡片主体内部的侧边栏，理想情况下它应该只出现在卡片主体内部，但它不起作用。我怎样才能使它适合外部div或b-card主体？

<template>
  <div class="">
    <div>
      <b-card title="Card Title" body-class="text-center" header-tag="nav">
        <template v-slot:header>
          <b-nav card-header tabs>
            <b-nav-item active>Active</b-nav-item>
            <b-nav-item>Inactive</b-nav-item>
            <b-nav-item disabled>Disabled</b-nav-item>
          </b-nav>
        </template>

        <b-card-text>
          With supporting text below as a natural lead-in to additional content.
        </b-card-text>
        <b-card-body>
          <b-sidebar visible="true" title="Sidebar" shadow>
            <div class="px-3 py-2">
              <p>
                Cras mattis consectetur purus sit amet fermentum. Cras justo
                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <b-img
                src="https://picsum.photos/500/500/?image=54"
                fluid
                thumbnail
              ></b-img>
            </div>
          </b-sidebar>
        </b-card-body>

        <b-button variant="primary">Go somewhere</b-button>
      </b-card>
    </div>
  </div>
</template>

​

​

​

​

Answer 1

侧边栏实际上并不是设计在容器中的。而是用作整个页面的画布外菜单。

但是，您可以使用一些CSS对其进行一些修改以满足您的需求。侧边栏在默认情况下是position: fixed的，因此它固定在视口上。

您需要将其更改为position: absolute，以便它将基于最接近的父对象position: relative进行定位。在这种情况下，这就是卡片。

在代码片段中，侧边栏放在标题上。如果只想将其放在主体内，则只需使用position: relative将其包装在另一个元素中

​

new Vue({
  el: "#app"
});

body {
  padding: 1rem;
}

.my-sidebar.b-sidebar-outer {
  position: absolute !important;
  height: 100% !important;
}

.my-sidebar .b-sidebar {
  position: absolute !important;
  height: 100% !important;
}

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
  <!-- The height is only here for the example -->
  <b-card style="min-height: 300px;" class="overflow-hidden" no-body>
    <b-card-header>
      <b-card-title>Title</b-card-title>
    </b-card-header>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
      <div class="px-3 py-2">
       <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        </p>
      </div>
    </b-sidebar>
  </b-card>
</div>

​

Answer 2

我通过使用JQuery修改元素的样式解决了这个问题，其中top': '60px'将是导航栏的高度。

mounted() {
   $('#sidebar-1').css(
     {'top': '60px',
       'opacity': '80%'       
     }
    );
},