需要增加 b 模态宽度。 Vue JS.Bootstrap
Posted
技术标签:
【中文标题】需要增加 b 模态宽度。 Vue JS.Bootstrap【英文标题】:Need to increase b-modal width. VueJS.Bootsrap 【发布时间】:2019-06-11 20:27:48 【问题描述】:我为 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 模态应用更改,您可以执行下一步:
我在全球范围内创建:
@media (min-width: 992px)
.modal .modal-huge
max-width: 90% !important;
width: 90% !important;;
然后我将“巨大”放入 b-modal 的 size 属性中。之所以使用“巨大”,是因为该类以“巨大”一词结尾。
【问题讨论】:
【参考方案1】:在 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 版本。
【讨论】:
这比样式表更容易。【参考方案2】:在调试完 CSS 后,我发现您可以添加以下 CSS 规则,以覆盖现有的规则并使宽度更大:
@media (min-width: 992px)
.modal-lg
max-width: auto !important;
@media (min-width: 576px)
.modal-dialog
max-width: auto !important;
【讨论】:
非常感谢。它有效,但前提是我可以全局覆盖该 CSS。是否可以为本地文件覆盖它? 为了在本地覆盖我做了以下 - 我创建了:@media (min-width: 992px) .modal .modal-huge max-width: 90% !important;宽度:90%!重要;; 然后我将“巨大”放入尺寸道具中。它有效以上是关于需要增加 b 模态宽度。 Vue JS.Bootstrap的主要内容,如果未能解决你的问题,请参考以下文章