web-dev-qa-db-ja.com

モーダル幅（増加）

モーダルを画面幅の80％程度にしたい。 modal-lgは十分な大きさではありません。この：

.modal .modal-dialog {
  width: 80%;
}

Bootstrapでは動作しません4。

bootstrap-4bootstrap-modal
39
Oleg Antonyan

ブートストラップ

以下を実行することで、デフォルトのbootstrap modal-lgを作成するか、単にオーバーライドできます。

.modal-lg {
    max-width: 80%;
}

動作しない場合は、!importantを追加するだけで、次のようになります。

.modal-lg {
    max-width: 80% !important;
}

modal-lgを呼び出します。

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

Bootstrap 4については、@ kitsu.ebの回答を参照してください。また、bootstrap 4ユーティリティを使用すると、応答性が損なわれる可能性があります。

72
claudios

ブートストラップ4には、 サイジングユーティリティ が含まれています。サイズをページ幅の25/50/75/100％に変更できます（さらに多くの増分があることを望みます）。

これらを使用するには、modal-lgクラスを置き換えます。デフォルトの幅とmodal-lgはいずれもcss max-widthを使用してモーダルの幅を制御するため、最初にmw-100クラスを追加してmax-widthを無効にします。次に、必要な幅クラスを追加するだけです。 w-75。

modal divではなく、mw-100クラスを持つdivにw-75およびmodal-dialogクラスを配置する必要があることに注意してください。

<div class='modal-dialog mw-100 w-75'>
    ...
</div>
29
kitsu.eb

レスポンシブアンサー。

@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}
9
Joel Enanod Jr

これは私のために働いた解決策でした：

.modal{
 padding: 0 !important;
}
.modal-dialog {
  max-width: 80% !important;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content {
  border-radius: 0 !important;
  height: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>

<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <a href="#" class="" data-dismiss="modal">Close Menu</a>

      <nav class="modal-nav">
        <ul>
          <li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
            <div class="collapse" id="collapseExample">
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Made To Order</a></li>
          <li><a href="#">Heritage</a></li>
          <li><a href="#">Style & Fit</a></li>
          <li><a href="#">Sign In</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
3
Nemus

Bootstrap 4では、 'max-width'属性を使用する必要があり、その後完全に機能します。

<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
    <div class="modal-content">
        <div class="modal-body">
            Sample text
        </div>
    </div>
</div>
3
CeezS

クラスをオーバーライドするクラスの幅を指定した後、単に！importantを使用します。

例

.modal .modal-dialog {
  width: 850px !important;
}

うまくいけば、これはあなたのために働くでしょう。

2
Unknown_Coder

pxを使用してみてください

.modal .modal-dialog {
  width: 850px;
}

サイズを変更するだけです。

0
mjishigh

Sassを使用する場合、

documentation に従って、デフォルト値をカスタマイズできます。

あなたの場合、$modal-lgファイルの_custom.scssという名前の変数を簡単にオーバーライドできます。

0
s.a.filko
The following solution will work for Bootstrap 4.

.modal .modal-dialog {
  max-width: 850px;
}
0
Asraf Ud Duha

モーダルがコンテナに配置されていないことを確認し、元の幅から幅を変更しない場合は、！important注釈を追加してみてください。

0
Elie Nassif