[解決済み] bootstrap 4 を使ってフォームを中央に配置する方法
2022-03-07 09:57:42
質問
bootstrapを学んだばかりで、bootstrap4を使ってフォームを中央に配置しようとしましたが、何度も失敗しているようです。コンテナ、マージンオート、グリッドなどを入れてみましたが、やはり失敗してしまいます。
最後にbootstrap gridを使用したコードを紹介します。
<form class="col-lg-6 offset-lg-3">
<div class="row">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
そして、以下はそのリンクです。 https://jsfiddle.net/artjia/emsw7t93/
解決方法は?
<ブロッククオート
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="col-lg-6 offset-lg-3 ">
<div class="row justify-content-center">
<input type="text" placeholder="Example input">
<span class="input-group-btn">
<button class="btn btn-primary">Download</button>
</span>
</div>
</form>
関連
-
[解決済み】html文書に縦の空白を挿入するには?
-
[解決済み】Telegramマークダウンの構文。太字 *と* イタリック?(2018年9月)
-
[解決済み] css画像が表示されない
-
[解決済み] mailchimpのメールインラインスタイルのコーディングがいつも通りできない
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】画像のURLで禁断の403を出す
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] SRCとHREFの違い
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] divが重ならないようにするには?
-
[解決済み] 画像をインラインで表示する方法