Блог

Главная - Вопросы по программированию - Bootstrap vue удаляет дополнение из модального тела

Bootstrap vue удаляет дополнение из модального тела

#bootstrap-modal #bootstrap-vue

#bootstrap-модальный #bootstrap-vue

Вопрос:

Как я могу удалить заполнение модального тела? Я использую 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>

Ответ №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>