我为 VueJS 使用 bootstrap v4,我需要增加 b-modal。 我尝试了这里提到的不同方法:https://github.com/bootstrap-vue/bootstrap-vue/issues/632但没有任何帮助。 一般来说,我的代码看起来像:
<b-modal :ref="fieldName" :id="fieldName" :title="msg" size="lg" modal-class="b-modal">
<div class="script_table_container" v-if="scripts.length > 0">
<b-table :items="scripts" per-page="10" :current-page="currentPage">
<template slot="propertySnippet" slot-scope="data">
<samp>
{{data.value}}
</samp>
</template>
</b-table>
<b-pagination :total-rows="scripts.length" per-page="10" v-model="currentPage" hide-goto-end-buttons align="right"/>
</div>
<div slot="modal-footer">
<b-btn class="mr-sm-2 su-btn-link" @click="close">Close</b-btn>
</div>
</b-modal>
我需要将宽度增加到屏幕的 80-90%,因为表格中的一些值很长。
希望得到你们的帮助。我相信你们是大师。
附言答案已经找到。 要为特定的 b-modals 应用更改,您可以按照下一步操作:
我在全局范围内创建:
@media (min-width: 992px) {
.modal .modal-huge {
max-width: 90% !important;
width: 90% !important;;
}
}
然后我将“巨大”放入 b-modal 的 size 属性中。使用“巨大”是因为类(class)以“巨大”一词结尾。
最佳答案
在 CSS 文件中创建新元素并不总是可行的。如果你想适应一些东西,你总是需要再次搜索我在哪里定义了宽度,样式,我是否已经定义了,......
我发现将它直接包含在我的代码中更容易。对于 b-model,我找到了以下解决方案:
<div>
<b-modal size="xl" title="Very large model"></b-modal>
<b-modal size="lg" title="Large model"></b-modal>
<b-modal size="sm" title="Small model"></b-modal>
</div>
它适用于我的版本 Bootstrap v4.3。
关于html - 需要增加 b 模态宽度。 VueJS.Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54239306/