需要增加b模态宽度。VueJS启动包

Question

我将bootstrap v4用于VueJS，并且需要增加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％，因为表内的某些值很长。

希望对您有所帮助。我相信你是大师。

PS已找到答案。要将更改应用于某些b模态，可以执行下一步：

我在全球创建：

@media (min-width: 992px) { 
   .modal .modal-huge { 
      max-width: 90% !important;
      width: 90% !important;;
    }
 }

之后，我将“巨大”放入b模态的大小道具中。使用“巨大”是因为该类以“巨大”单词结尾。

Answer 1

在CSS文件中制作新元素并不总是可行的。如果您想适应某些东西，您总是需要搜索我再次定义了宽度，样式，是否已经定义了...

我发现将其直接包含在我的代码中更加容易。对于b模型，我发现以下解决方案：

<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版本。

Answer 2

调试 CSS 后，我发现您可以添加以下 CSS 规则来覆盖现有规则并使宽度更大：

@media (min-width: 992px)
 .modal-lg {
    max-width: auto !important;
   }

@media (min-width: 576px)
  .modal-dialog {
    max-width: auto !important;

  }