1. ホーム
  2. ハイパーリンク

[解決済み】Twitter Bootstrap 3でボタンを中央に配置する方法は?

2022-04-05 15:35:20

質問

Twitter Bootstrapでフォームを作っているのですが、フォームの入力の下にあるボタンが中央に配置されないという問題があります。すでに center-block クラスをボタンに追加しましたが、うまくいきませんでした。どのように修正したらよいでしょうか?

以下は私のコードです。

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

解決方法は?

ボタンをdivで囲み、"text-center"クラスで囲みます。

これを変更するだけです。

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

これに

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

編集

現在 BootstrapV4 , center-block を削除しました。 #19102 の代わりに m-*-auto