Как сделать так, чтобы моя боковая панель помещалась только внутри внешнего div - PullRequest
Новая
       15

Как сделать так, чтобы моя боковая панель помещалась только внутри внешнего div

0 голосов
/ 05 мая 2020

Это мой код 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>

enter image description here

enter image description here

1 Ответ

2 голосов
/ 05 мая 2020

Боковая панель на самом деле не предназначена для размещения внутри контейнера. но вместо этого может использоваться в качестве меню вне холста для всей страницы.

Однако вы можете немного взломать его, чтобы он соответствовал вашим потребностям, с небольшим 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>
...