web-dev-qa-db-ja.com

bootstrapモーダルを広くしようとしています

私はこのコードを使用していますが、モーダルは薄すぎます：

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

これは次のようになります。

Thin modal

そのモーダルをもっと広くするにはどうすればよいですか？理想的には、現在幅が細すぎるので、その幅の約2倍にしたいです。

twitter-bootstrapmodal-dialog
58
b85411

bootstrapの縮小されていないCSSを常に用意しておくと、コンポーネントのスタイルを確認でき、LESSを使用せずにミックスインを上書きしたり、なんでも

これは、768px以上のデフォルトのモーダルcssです。

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

幅が広いクラスmodal-lgがあります

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

600pxサイズの2倍で流動的なものが必要な場合は、CSSでBootstrap cssの後にこのようなことを行い、そのクラスをモーダルダイアログに割り当てます。

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

デモ： http://jsbin.com/yefas/1

149
Christina

数種類のモーダルのみにこのソリューションが必要な場合は、style="width:90%"属性を使用してください。

例：

div class="modal-dialog modal-lg" style="width:90%"

注：これは、この特定のモーダルのみを変更します

3
Krzyszof Ra

あなたが試すことができます：

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

クラスに.modal-wideを追加するだけです

1
Tjay