Bootstrap vue从模态体中移除填充

问题描述 投票:0回答:1

如何删除模态体填充?我正在使用BoostrapVue

 <b-modal
  v-model="show"
  title="Modal Variants">

  <b-container fluid>
  </b-container>

  <div slot="modal-footer" class="w-100">
    <b-button size="sm" class="float-right" variant="primary" @click="show=false">Close</b-button>
  </div>
</b-modal>
bootstrap-modal bootstrap-vue
1个回答
1
投票

您可以提供自己的类来通过body-class属性删除体填充(或使用bootstrap p-0类)。

new Vue({
  el: '#app',
  mounted () {
    this.$refs.modal.show()
  }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <div>
    <b-modal ref="modal" id="modal1" title="BootstrapVue" body-class="p-0">
      <container fluid>
        content
      </container>
      <div slot="modal-footer">
        <b-button size="sm" class="float-right" variant="primary">Close</b-button>
      </div>
    </b-modal>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.