如何让我的侧边栏只适合外部 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

侧边栏并非真正设计用于容器内。而是用作整个页面的 off-canvas 菜单。

但是，您可以稍微修改一下以满足您的需要 CSS。侧边栏默认是position: fixed，所以它固定在视口上。

您需要将其更改为 position: absolute，以便它会根据最近的 parent 即 position: relative 进行定位。在这种情况下就是卡片。

在代码片段中，侧边栏覆盖了标题。如果你只想要它在 body 内，你需要做的就是用 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%'       
     }
    );
},

如何让我的侧边栏只适合外部 div

How to make my sidebar fit only inside the outer div

css

vue.js

bootstrap-vue