38

Twitterのブートストラップモーダルをより広く、より高く設定するには?

ここに例があります (クリックしてください: Launch demo modal):

http://twitter.github.com/bootstrap/javascript.html#modals

4

11 に答える 11

56

Bootstrap 3.1.1ではmodal-lg、modal-smクラスが追加されました。クエリmodalを使用してサイズを制御します。@mediaこれは、modalサイズを制御するよりグローバルな方法です。

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

サンプルコード:

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
于 2014-03-11T18:07:37.057 に答える
27

モーダル ID が「myModal」の場合

次のようなスタイルを追加してみてください。

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
于 2013-02-17T09:58:12.233 に答える
10

% 単位のサイズの場合、次のようにすることができます。

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}
于 2013-05-06T23:38:42.507 に答える
9

クラスのモデルダイアログを変更するとうまくいきました

.modal-dialog {
    width: 90%;
}
于 2016-02-15T21:02:04.417 に答える
5

css ファイルに、新しいクラス定義を追加します。

.higherWider {
    width:970px;
    margin-top:-250px;
}

higherWiderHTML で、モーダルのクラス文字列内に追加します。

<div class="modal hide fade higherWider">
于 2013-02-17T10:00:05.030 に答える
1

CSS の場合:

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}
于 2013-02-17T09:59:20.927 に答える
0

以下は、ビューポート ブレークポイントがなくても機能し、古いブートストラップ モーダルでも機能します。

#myModal{
   position: fixed;
   left: 10% !important;
   right: 10% !important;
   top: 10% !important;
   width: 80% !important;
   margin: 0 !important;
}
于 2020-07-15T20:23:08.117 に答える
-1

次の解決策のいずれかがうまくいきました：

  1. などでモーダルセクションに適用style="width: 50%; height:50%;"するdivclass="modal-dialog"

    <div class="modal-dialog" style="width: 50%; height:50%;">

    また

  2. このようにスタイルセクションを作成する

     #themodal .modal-dialog{ width:50%; height:50%;}
于 2015-12-13T13:28:09.777 に答える