[解決済み] Bootstrap 4 のモーダルフッターボタンの左揃えと右揃え
2023-02-18 13:02:54
質問
Bootstrap 4はモーダルフッターにflex-boxを使用しています。左と右の2つのボタンが欲しい場合、どうすれば正しく動作するでしょうか?
以下のコードでは
div.row
と
col-sm-6
を追加しましたが、うまくいきません。
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-left">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div class="col-sm-6 text-right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
どのように解決するのですか?
では
modal-footer
は、Bootstrap 4 では "display:flex" なので、自動余白を使うのが一番簡単でしょう。使用方法
mr-auto
を使います。
<div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
こちらもご覧ください。 Bootstrap の div 内で左寄せと右寄せにする。
コメントのフォローアップ "右側のボタンが左のスペースをすべて占める必要がある場合はどうすればよいですか "-使用するのは
btn-block
クラスを使用します。
<div class="modal-footer">
<button type="button" class="btn btn-primary text-nowrap">Save changes</button>
<button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>
関連
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み] Twitter Bootstrapのボタンを右寄せにするにはどうしたらいいですか?
-
[解決済み] Bootstrap 4のVertical Align Center [重複]について
-
[解決済み] Bootstrapでナビバーアイテムを右寄せにする
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み] TwitterのPopoverでdivをコンテンツとして使用することは可能ですか?
最新
-
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でpanel-bodyの背景色を変更するには?
-
[解決済み] angular 2でbootstrap 4を使用するには?
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み] BootstrapとjQuery Validationプラグイン
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] Bootstrap 4: ドロップダウンメニューが画面の右側にずれていく
-
[解決済み] Twitter Bootstrapのホストバージョンはありますか?[クローズド]
-
[解決済み] Bootstrapの中央見出し
-
[解決済み] jqueryなしでtwitter bootstrapを使用できますか?