引导 vue 从模态主体中删除填充

Question

如何删除模态主体填充？我正在使用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>

Answer 1

您可以通过 body-class 属性提供自己的类来删除正文填充(或使用引导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>