web-dev-qa-db-ja.com

bモーダル幅を増やす必要があります。 VueJS.Bootstrap

私は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％まで幅を広げる必要があります。

あなたの助けを期待してください。私はあなたが教祖だと信じています。

P.S.答えが見つかりました。特定のbモーダルに変更を適用するには、次の手順に従います。

私はグローバルに作成しました：

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

その後、b-modalのサイズpropに「huge」を配置しました。クラスが「巨大な」単語で終わるため、「巨大な」が使用されます。

htmlcssvue.jsbootstrap-4bootstrap-modal
3
Yuriy Korovko

CSSをデバッグした後、既存のルールを上書きして幅を大きくするために、次のCSSルールを追加できることがわかりました。

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

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

  }
1
Boussadjra Brahim

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で動作します。

8
ageans