bootstrapのモーダルを広くしてみる
2023-09-05 15:47:29
質問
このコードを使用していますが、モーダルが細すぎます。
<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">×</button>
<h4 class="modal-title">Solutions</h4>
</div>
<div class="modal-body modal-lg">
<p>Content</p>
</div>
</div>
</div>
</div>
このような感じです。
モーダルの幅をもっと広くするにはどうすればよいですか? 理想的には、今のところ細すぎるため、その 2 倍程度の幅にしたいのです。
どのように解決するのですか?
bootstrap の最小化されていない CSS を常に手元に置いて、コンポーネントがどのようなスタイルを持っているかを確認し、LESS を使って mixin などを上書きしないのであれば、その後に CSS ファイルを作成する。
これは、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倍のサイズで、流動的なものが必要な場合は、Bootstrap cssの後にCSSで以下のような処理を行い、そのクラスをmodal-dialogに割り当てます。
@media (min-width: 768px) {
.modal-xl {
width: 90%;
max-width:1200px;
}
}
HTML
<div class="modal-dialog modal-xl">
デモです。 http://jsbin.com/yefas/1
関連
-
[解決済み] Bootstrapのモーダルが表示されない
-
[解決済み] Bootstrap:Bootstrapのバージョンを識別する方法は?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Bootstrapのモーダルを閉じる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap:Bootstrapのバージョンを識別する方法は?
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] Twitter Bootstrapのボタンを右寄せにするにはどうしたらいいですか?
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] bootstrapのtabindex="-1 "は何のためにあるのか?
-
[解決済み] Bootstrapをバージョン3にアップデートする - どうすればいいの?
-
[解決済み] Bootstrap 4 のモーダルフッターボタンの左揃えと右揃え
-
[解決済み] Bootstrapを使ってモバイルでテーブルを表示するには?
-
[解決済み] Twitter Bootstrap 3 のハーフカラム