3

Twitter Bootstrapでは、モーダルポップアップのデフォルトの幅は560pxで、left50％です。モーダルポップアップの幅を大きくしたい。span10そこで、モーダルポップアップにクラスを追加しました。ただし、leftが50％に固定されているため、モーダルポップアップは右側に表示されます。これを修正するためleft: 8%に、モーダルポップアップにインラインCSSとして追加しました。意図したとおりに動作します。しかし、Twitter BootstrapのデフォルトのCSSを使用し、追加のCSS（インライン、内部、または外部）を使用せずにこれを行うためのトリックがあるかどうかを知りたいです。

4

1 に答える 1

10

Bootstrap 2.2 を使用して、modalコンテナーに CSS セレクターを追加し、widthandmargin-leftをwidth/2 * -1 に設定しました。

例：

#MyModal {
   width: 900px; 
   margin-left: -450px;
}

HTML:

<div id="MyModal" class="modal hide fade" role="dialog">
  <!-- etc. -->
</div>

編集

Bootstrap には現在、モーダルの幅をカスタマイズするための JS または data-role 動作による方法がありません。グローバルに新しいデフォルト幅が必要な場合は、ブートストラップをフォークして LESS テンプレートを変更するか、コンパイルされた CSS を編集するか、説明した方法と同様のセレクターを使用して独自のスタイルシートに CSS を追加し、ブートストラップの後に含める必要があります。ページの .css。後者が最も簡単です。

または、デフォルトの幅を保持したいが、いくつかの一般的なモーダル サイズを事前に定義したい場合は、独自のスタイル シートにいくつかのクラス セレクターを追加し、必要に応じてクラス名を追加することができます。

.modal-small { width: 200px; margin-left: -100px; }
.modal-large { width: 900px; margin-left: -450px; }

HTML:

 <div class="modal modal-large hide fade" /> <!-- make this one large -->
 <div class="modal modal-small hide fade" /> <!-- and this one small -->
于 2013-03-06T07:32:44.340 に答える