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

Question

这是我的Vue代码，我正在使用bootstrap-vue，我正在使用卡身内部的侧边栏理想情况下，它应仅出现在卡身内部，但不起作用。如何使它适合外部div或B卡主体？

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>